From 1b724e2244406119938da9b1818c464ed014a9c6 Mon Sep 17 00:00:00 2001
From: Mitya <mitekk@gmail.com>
Date: Mon, 20 Apr 2026 01:46:39 +0300
Subject: [PATCH] feat: implement loading state management to prevent
 flickering during layout computation

---
 index.html                 |  1 +
 src/index.css              |  4 ++++
 src/layout/main.layout.tsx | 14 ++++++++++++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index a0446ae..104eb4d 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,7 @@
             ? "dark"
             : "light";
         document.documentElement.dataset.theme = t;
+        document.documentElement.dataset.loading = "1";
       })();
     </script>
   </head>
diff --git a/src/index.css b/src/index.css
index a890b8f..64fb634 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,6 +3,10 @@
 @import "@fontsource/poppins/latin-700.css";
 @import "tailwindcss";
 
+html[data-loading] #root {
+  visibility: hidden;
+}
+
 @theme {
   /* Layout */
   --color-surface: #f3f1e9;
diff --git a/src/layout/main.layout.tsx b/src/layout/main.layout.tsx
index 7bce954..2b135b9 100644
--- a/src/layout/main.layout.tsx
+++ b/src/layout/main.layout.tsx
@@ -35,12 +35,22 @@ export function MainLayout({ children }: MainLayoutProps) {
   const { theme, toggle } = useTheme();
 
   const handleResize = useCallback(() => {
-    setLayout(computeLayout());
+    setLayout((prev) => {
+      const next = computeLayout();
+      if (
+        prev.tileSize === next.tileSize &&
+        prev.dims.rows === next.dims.rows &&
+        prev.dims.cols === next.dims.cols
+      ) {
+        return prev;
+      }
+      return next;
+    });
   }, []);
 
   useLayoutEffect(() => {
+    delete document.documentElement.dataset.loading;
     window.addEventListener("resize", handleResize);
-    handleResize();
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);