Merge pull request #248 from IncognitoTGT/main

fix flicker

src/components/ThemeProvider.tsx

@@ -54,10 +54,12 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
       root.classList.remove(theme);
     });
     root.classList.add(theme);
-    document.documentElement.style.setProperty(
-      "--background-image",
-      `url(${background})`
-    );
+    if (background) {
+      document.documentElement.style.setProperty(
+        "--background-image",
+        `url(${background})`
+      );
+    }
   }, [theme, themes, background]);
 
   const value = {

src/index.tsx

@@ -14,7 +14,7 @@ const particlesUrl = localStorage.getItem("particles") || "none";
 
 export default function App() {
   const [init, setInit] = useState(false);
-  const {background} = useTheme();
+  const { background } = useTheme();
   // this should be run only once per application lifetime
   useEffect(() => {
     initParticlesEngine(async (engine) => {
@@ -33,18 +33,22 @@ export default function App() {
     console.log(container);
   };
   return (
-    <div className={!background && "bg-primary"}>
+    <div>
       {window.location.origin === "https://nebulaproxy.io" && <Meta />}
       {/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
       <Suspense fallback={<LoadSuspense />}>
-        <Routes />
-        <div className="z-10 h-full w-full bg-primary">
+        <main className="absolute z-30 h-screen w-screen">
+          <Routes />
+        </main>
+        <div
+          className={`z-20 h-screen w-screen ${!background && "bg-primary"}`}
+        >
           {init && particlesUrl !== "none" && (
             <Particles
               id="tsparticles"
               url={particlesUrl}
               particlesLoaded={particlesLoaded}
-              class="bg-primary"
+              className="bg-primary"
             />
           )}
         </div>