From e29242394697d5e64ec8424c5971f2c8d0614ba2 Mon Sep 17 00:00:00 2001
From: Sulagna Ghosh <62666287+suzy-g38@users.noreply.github.com>
Date: Wed, 5 Apr 2023 23:07:09 +0530
Subject: [PATCH] fix: solve dark theme loading issue (#145)

* docs: correct spelling and pucntuation in heading.mdx

* feat: add my contribution profile

* feat: add my contribution profile

* feat: add my contribution profile

add changes in occupation and level

* Update suzy-g38.mdx

* docs: change in how to write professional commit

add some rules,specifications,headings and examples

* Update How-to-write-professional-commits.mdx

add example after git command

* fix: solve dark theme loading issue

---------

Co-authored-by: Suzy <sulagnaghosh52@gmail.com>
Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
---
 src/context/ThemeContext.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index 83406fb..e55240e 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -26,6 +26,7 @@ const ThemeContext = createContext<ThemeStateType>({
 type ThemeProps = ComponentProps<'div'>;
 
 const ThemeProvider: FC<ThemeProps> = ({ children, className, ...props }) => {
+  const [loading, setLoading] = useState<boolean>(true);
   const [isDark, setIsDark] = useState<boolean>(false);
   const [isThemeChanged, setIsThemeChanged] = useState<number>(0);
   const [mode, setMode] = useState<Mode>(`light`);
@@ -43,10 +44,12 @@ const ThemeProvider: FC<ThemeProps> = ({ children, className, ...props }) => {
       setIsDark(false);
     }
   }
+
   useEffect(() => {
     const darkModeMediaQuery = window.matchMedia(
       '(prefers-color-scheme: dark)'
     );
+
     const isTokenFound = window.localStorage.getItem('prefers-theme');
     if (isTokenFound) {
       if (isTokenFound === 'dark') {
@@ -64,8 +67,10 @@ const ThemeProvider: FC<ThemeProps> = ({ children, className, ...props }) => {
         setMode('light');
         setIsDark(false);
       }
+
       darkModeMediaQuery.addEventListener('change', mediaQueryListener);
     }
+    setLoading(false);
     return () =>
       darkModeMediaQuery.removeEventListener('change', mediaQueryListener);
 
@@ -79,9 +84,11 @@ const ThemeProvider: FC<ThemeProps> = ({ children, className, ...props }) => {
   };
   return (
     <ThemeContext.Provider value={value}>
-      <div className={`${mode} ${className || ``}`} {...props}>
-        {children}
-      </div>
+      {!loading && (
+        <div className={`${mode} ${className || ``}`} {...props}>
+          {children}
+        </div>
+      )}
     </ThemeContext.Provider>
   );
 };