Preload theme to prevent screen flicker (#183)

* Preload theme to prevent screen flicker

* refactor: extract localStorageCache

Author: int128

src/Themes/component.tsx

@@ -1,16 +1,11 @@
 import './component.css'
-import { FC, useEffect } from 'react'
 import { allColorSchemes, allThemes } from './model'
-import { useSelectedColorScheme, useSelectedTheme } from './repository'
+import { useSelectedColorScheme, useSelectedTheme } from './hook'
+import { FC } from 'react'
 
 const ThemesComponent: FC = () => {
-  const [selectedTheme, setSelectedTheme] = useSelectedTheme('standard')
-  const [selectedColorScheme, setSelectedColorScheme] = useSelectedColorScheme('auto')
-  useEffect(() => {
-    document.documentElement.dataset['theme'] = selectedTheme
-    document.documentElement.dataset['colorScheme'] = selectedColorScheme
-  }, [selectedTheme, selectedColorScheme])
-
+  const [selectedTheme, setSelectedTheme] = useSelectedTheme()
+  const [selectedColorScheme, setSelectedColorScheme] = useSelectedColorScheme()
   return (
     <>
       <div>

src/Themes/hook.ts

@@ -0,0 +1,39 @@
+import { ColorScheme, Theme, isColorScheme, isTheme } from './model'
+import { Dispatch, useEffect } from 'react'
+import { Spec, useChromeStorageWithCache } from '../infrastructure/chromeStorage'
+import { getOrInitialValue } from '../infrastructure/localStorageCache'
+
+const selectedThemeSpec: Spec<Theme> = {
+  areaName: 'sync',
+  key: 'v3.selectedTheme',
+  initialValue: 'standard',
+  isType: isTheme,
+}
+
+export const useSelectedTheme = (): [Theme, Dispatch<Theme>] => {
+  const [theme, setTheme] = useChromeStorageWithCache(selectedThemeSpec)
+  useEffect(() => {
+    document.documentElement.dataset['theme'] = theme
+  }, [theme])
+  return [theme, setTheme]
+}
+
+const selectedColorSchemeSpec: Spec<ColorScheme> = {
+  areaName: 'sync',
+  key: 'v3.selectedColorScheme',
+  initialValue: 'auto',
+  isType: isColorScheme,
+}
+
+export const useSelectedColorScheme = (): [ColorScheme, Dispatch<ColorScheme>] => {
+  const [colorScheme, setColorScheme] = useChromeStorageWithCache(selectedColorSchemeSpec)
+  useEffect(() => {
+    document.documentElement.dataset['colorScheme'] = colorScheme
+  }, [colorScheme])
+  return [colorScheme, setColorScheme]
+}
+
+export const preloadFromCache = () => {
+  document.documentElement.dataset['theme'] = getOrInitialValue(selectedThemeSpec)
+  document.documentElement.dataset['colorScheme'] = getOrInitialValue(selectedColorSchemeSpec)
+}

src/Themes/repository.ts

@@ -3,6 +3,7 @@ import App from './App/component'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { migratePreferencesFromV2ToV3 } from './migration'
+import { preloadFromCache } from './Themes/hook'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
@@ -11,6 +12,9 @@ root.render(
   </React.StrictMode>
 )
 
+// preload the theme to prevent screen flicker
+preloadFromCache()
+
 // the default size of popup is too small, so explicitly set it
 // https://developer.chrome.com/docs/extensions/reference/action/#popup
 if (document.location.hash === '#popup') {

src/index.tsx

@@ -1,13 +1,14 @@
-import { useEffect, useState } from 'react'
+import { Dispatch, useEffect, useState } from 'react'
+import { useLocalStorageCache } from './localStorageCache'
 
-type Spec<T> = {
+export type Spec<T> = {
   areaName: chrome.storage.AreaName
   key: string
   initialValue: T
   isType: (value: unknown) => value is T
 }
 
-export const useChromeStorage = <T>(spec: Spec<T>): readonly [T, (newValue: T) => void] => {
+export const useChromeStorage = <T>(spec: Spec<T>): readonly [T, Dispatch<T>] => {
   const [storedValue, setStoredValue] = useState<T>(spec.initialValue)
   useEffect(
     () => {
@@ -27,7 +28,7 @@ export const useChromeStorage = <T>(spec: Spec<T>): readonly [T, (newValue: T) =
   ]
 }
 
-const initialLoad = <T>(spec: Spec<T>, setStoredValue: (newValue: T) => void) => {
+const initialLoad = <T>(spec: Spec<T>, setStoredValue: Dispatch<T>) => {
   chrome.storage[spec.areaName]
     .get(spec.key)
     .then((items) => {
@@ -48,7 +49,7 @@ const initialLoad = <T>(spec: Spec<T>, setStoredValue: (newValue: T) => void) =>
     .catch((e) => console.error(e))
 }
 
-const subscribeChange = <T>(spec: Spec<T>, setStoredValue: (newValue: T) => void) => {
+const subscribeChange = <T>(spec: Spec<T>, setStoredValue: Dispatch<T>) => {
   const area = chrome.storage[spec.areaName]
   const listener = (changes: { [key: string]: chrome.storage.StorageChange }) => {
     if (!(spec.key in changes)) {
@@ -68,3 +69,15 @@ const subscribeChange = <T>(spec: Spec<T>, setStoredValue: (newValue: T) => void
   area.onChanged.addListener(listener)
   return () => area.onChanged.removeListener(listener)
 }
+
+export const useChromeStorageWithCache = <T extends string>(spec: Spec<T>): [T, Dispatch<T>] => {
+  const [cache, setCache] = useLocalStorageCache(spec)
+  const [value, setValue] = useChromeStorage<T>({
+    ...spec,
+    initialValue: cache,
+  })
+  useEffect(() => {
+    setCache(value)
+  }, [setCache, value])
+  return [value, setValue]
+}

src/infrastructure/chromeStorage.ts

@@ -0,0 +1,23 @@
+import { Dispatch, useEffect, useState } from 'react'
+
+type Spec<T extends string> = {
+  key: string
+  initialValue: T
+  isType: (value: unknown) => value is T
+}
+
+export const useLocalStorageCache = <T extends string>(spec: Spec<T>): [T, Dispatch<T>] => {
+  const [value, setValue] = useState<T>(getOrInitialValue(spec))
+  useEffect(() => {
+    localStorage.setItem(spec.key, value)
+  }, [spec.key, value])
+  return [value, setValue]
+}
+
+export const getOrInitialValue = <T extends string>(spec: Spec<T>): T => {
+  const cachedValue = localStorage.getItem(spec.key)
+  if (spec.isType(cachedValue)) {
+    return cachedValue
+  }
+  return spec.initialValue
+}

src/infrastructure/localStorageCache.ts

@@ -27,4 +27,5 @@ export const migrate = async () => {
   }
   const shortcutMap = upgrade(folderItemPreferences)
   await chrome.storage.sync.set({ [V3_KEY]: shortcutMap.serialize() })
+  localStorage.removeItem(V2_KEY)
 }

src/migration/folderItemPreferences.ts

@@ -26,4 +26,5 @@ export const migrate = async () => {
   }
   const folderCollapse = upgrade(folderPreferences)
   await chrome.storage.sync.set({ [V3_KEY]: folderCollapse.serialize() })
+  localStorage.removeItem(V2_KEY)
 }

src/migration/folderPreferences.ts

@@ -3,10 +3,6 @@ import * as folderPreferences from './folderPreferences'
 
 // Migrate preferences from v2 (Local Storage) to v3 (Chrome Storage)
 export const migratePreferencesFromV2ToV3 = async () => {
-  if (window.localStorage.length === 0) {
-    return
-  }
   await folderPreferences.migrate()
   await folderItemPreferences.migrate()
-  window.localStorage.clear()
 }