fix: Attempt to fix flickering

db/app/core/components/DarkModeToggle.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export const DarkModeToggle = () => {
   const [mounted, setMounted] = useState(false)
   const theme = useTheme()
-  const {theme: nextTheme, setTheme} = nextUseTheme()
+  const {setTheme} = nextUseTheme()
   const classes = useStyles()
   const [preferedColorScheme, setPreferedColorScheme] = useGlobalState(
     useCallback(

db/app/pages/404.tsx

@@ -44,5 +44,6 @@ const PageNotFound: BlitzPage = () => {
 }
 
 PageNotFound.getLayout = (page) => <Layout>{page}</Layout>
+PageNotFound.suppressFirstRenderFlicker = true
 
 export default PageNotFound;

db/app/pages/_app.tsx

@@ -8,18 +8,20 @@ import {
 
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { useMediaQuery } from "@mui/material";
 import { useGlobalState } from "app/core/state/GlobalState";
 import { LocalStorageKeys } from "app/core/dto/SaveKeys";
 import { ThemeMode } from "app/core/state/ThemeMode";
 import { darkPalette } from "app/core/theme/darkTheme";
 import { lightPalette } from "app/core/theme/lightTheme";
 import { getTheme } from "app/core/theme/Theme";
+import { useTheme } from "next-themes";
 
-export default function App({ Component, pageProps }: AppProps) {
+const App = ({ Component, pageProps }: AppProps)  => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mounted, setMounted] = useState(false)
+  const {theme: prefersDarkMode} = useTheme()
   const [preferedColorScheme ,setPreferedColorScheme] = useGlobalState(state => [state.preferedColorScheme, state.setPreferedColorScheme])
+  const reset = useQueryErrorResetBoundary().reset
 
   useEffect(() => {
       const localPreferedTheme = localStorage.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME);
@@ -38,12 +40,15 @@ export default function App({ Component, pageProps }: AppProps) {
     ()=> getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette.palette : lightPalette.palette),
     [preferedColorScheme]);
 
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
   return (
     <ThemeProvider theme={palette}>
       <CssBaseline />
       <ErrorBoundary
         FallbackComponent={RootErrorFallback}
-        onReset={useQueryErrorResetBoundary().reset}
+        onReset={reset}
       >
         {getLayout(<Component {...pageProps} />)}
       </ErrorBoundary>
@@ -51,32 +56,8 @@ export default function App({ Component, pageProps }: AppProps) {
   );
 }
 
-/*
-    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-    const [preferedColorScheme ,setPreferedColorScheme] = useGlobalState(state => [state.preferedColorScheme, state.setPreferedColorScheme])
-
-    useEffect(() => {
-        const localPreferedTheme = localStorage.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME);
-        if (localPreferedTheme) {
-            setPreferedColorScheme(localPreferedTheme as ThemeMode)
-            return
-        }
-
-        const preferedTheme = prefersDarkMode ? ThemeMode.DARK_MODE : ThemeMode.LIGHT_MODE;
-        setPreferedColorScheme(preferedTheme)
-        // eslint-disable-next-line
-    }, [prefersDarkMode]) // Need to be only used on prefersDarkMode change
-
-    return (
-        <>
-            <ThemeProvider theme={getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette : lightPalette)}>
-                <CssBaseline/>
-                <MainPage/>
-            </ThemeProvider>
-        </>
-    )
-*/
-
 function RootErrorFallback({ error }: ErrorFallbackProps) {
   return <ErrorComponent statusCode={error.statusCode || 400} title={error.message || error.name} />
 }
+
+export default App;

db/app/pages/index.tsx

@@ -214,6 +214,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const Search: BlitzPage = () => {
     const classes = useStyles();
+
     return (
         <>
             <Box className={classes.container}>
@@ -224,5 +225,6 @@ const Search: BlitzPage = () => {
 }
 
 Search.getLayout = (page) => <Layout>{page}</Layout>
+Search.suppressFirstRenderFlicker = true
 
 export default Search;