Cache

src/components/background/AppBackground.tsx

@@ -1,30 +1,32 @@
 "use client";
 
 import { usePatternBackground } from "@/components/background/PatternBackgroundProvider";
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { THEME_BG_ELEMENT_ID } from "@/lib/helpers/themeCache";
+import { useLayoutEffect } from "react";
 
 export default function AppBackground() {
   const { isPattern, backgroundStyle } = usePatternBackground();
-  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  useLayoutEffect(() => {
+    if (!isPattern) {
+      document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
+      return;
+    }
 
-  if (!mounted || !isPattern) {
-    return null;
-  }
+    let element = document.getElementById(THEME_BG_ELEMENT_ID);
+    if (!element) {
+      element = document.createElement("div");
+      element.id = THEME_BG_ELEMENT_ID;
+      element.setAttribute("aria-hidden", "true");
+      element.style.position = "fixed";
+      element.style.inset = "0";
+      element.style.pointerEvents = "none";
+      element.style.zIndex = "0";
+      document.body.appendChild(element);
+    }
 
-  return createPortal(
-    <div
-      aria-hidden
-      className="fixed inset-0 pointer-events-none"
-      style={{
-        zIndex: 0,
-        ...backgroundStyle,
-      }}
-    />,
-    document.body,
-  );
+    Object.assign(element.style, backgroundStyle as Record<string, string>);
+  }, [backgroundStyle, isPattern]);
+
+  return null;
 }