From b0925ef90d5c4bb8f6bfd7fe9ba6129048f1dcdf Mon Sep 17 00:00:00 2001 From: war-in Date: Thu, 5 Sep 2024 15:08:57 +0200 Subject: [PATCH 1/2] use debounced state for theme provider --- src/components/ThemeProvider.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index a20dc353394e..9582b0f60a57 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -1,4 +1,5 @@ import React, {useEffect, useMemo} from 'react'; +import useDebouncedState from '@hooks/useDebouncedState'; import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride'; import DomUtils from '@libs/DomUtils'; // eslint-disable-next-line no-restricted-imports @@ -12,8 +13,13 @@ type ThemeProviderProps = React.PropsWithChildren & { function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderProps) { const themePreference = useThemePreferenceWithStaticOverride(staticThemePreference); + const [, debouncedMyTheme, setMyTheme] = useDebouncedState(themePreference); - const theme = useMemo(() => themes[themePreference], [themePreference]); + useEffect(() => { + setMyTheme(themePreference); + }, [setMyTheme, themePreference]); + + const theme = useMemo(() => themes[debouncedMyTheme], [debouncedMyTheme]); useEffect(() => { DomUtils.addCSS(DomUtils.getAutofilledInputStyle(theme.text), 'autofill-input'); From 24789b9075fd9db8999b9745c3e8428d78a19eef Mon Sep 17 00:00:00 2001 From: war-in Date: Thu, 5 Sep 2024 15:10:40 +0200 Subject: [PATCH 2/2] rename --- src/components/ThemeProvider.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index 9582b0f60a57..fe6a2e86bc00 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -13,13 +13,13 @@ type ThemeProviderProps = React.PropsWithChildren & { function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderProps) { const themePreference = useThemePreferenceWithStaticOverride(staticThemePreference); - const [, debouncedMyTheme, setMyTheme] = useDebouncedState(themePreference); + const [, debouncedTheme, setDebouncedTheme] = useDebouncedState(themePreference); useEffect(() => { - setMyTheme(themePreference); - }, [setMyTheme, themePreference]); + setDebouncedTheme(themePreference); + }, [setDebouncedTheme, themePreference]); - const theme = useMemo(() => themes[debouncedMyTheme], [debouncedMyTheme]); + const theme = useMemo(() => themes[debouncedTheme], [debouncedTheme]); useEffect(() => { DomUtils.addCSS(DomUtils.getAutofilledInputStyle(theme.text), 'autofill-input');