From 8308bd0039308a46bda0068a49532022ec606b8e Mon Sep 17 00:00:00 2001
From: Mousumi Pal <moumipal2002@gmail.com>
Date: Tue, 8 Oct 2024 23:00:11 +0530
Subject: [PATCH] Fix: Prevent flash in dark mode

---
 frontend/src/App.tsx        | 7 ++++---
 frontend/src/hooks/index.ts | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0537e695..1455f495 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,6 @@ import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
 import PageNotFound from './PageNotFound';
-import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
 import { useState } from 'react';
 import Setting from './settings';
@@ -11,7 +10,6 @@ import './locale/i18n';
 import { Outlet } from 'react-router-dom';
 import { SharedConversation } from './conversation/SharedConversation';
 import { useDarkTheme } from './hooks';
-inject();
 
 function MainLayout() {
   const { isMobile } = useMediaQuery();
@@ -34,7 +32,10 @@ function MainLayout() {
 }
 
 export default function App() {
-  useDarkTheme();
+  const [,,componentMounted] = useDarkTheme();
+  if(!componentMounted) {
+    return <div />
+  }
   return (
     <div className="h-full relative overflow-auto">
       <Routes>
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index dfb9cb46..b993f3da 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -82,6 +82,7 @@ export function useDarkTheme() {
   };
 
   const [isDarkTheme, setIsDarkTheme] = useState<boolean>(getInitialTheme());
+  const [componentMounted, setComponentMounted] = useState(false);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
@@ -102,11 +103,12 @@ export function useDarkTheme() {
     } else {
       document.body?.classList.remove('dark');
     }
+    setComponentMounted(true);
   }, [isDarkTheme]);
 
   const toggleTheme = () => {
     setIsDarkTheme(!isDarkTheme);
   };
 
-  return [isDarkTheme, toggleTheme] as const;
+  return [isDarkTheme, toggleTheme, componentMounted] as const;
 }