fix: avoid FOUC of side bars on mobile

measuredco · Mar 27, 2024 · 83be956 · 83be956
1 parent 7c4d440
commit 83be956
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -345,6 +345,12 @@ export function Puck<UserConfig extends Config = Config>({
     [loadedOverrides]
   );
 
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <div className="Puck">
       <AppProvider
@@ -446,6 +452,7 @@ export function Puck<UserConfig extends Config = Config>({
                   className={getClassName({
                     leftSideBarVisible,
                     menuOpen,
+                    mounted,
                     rightSideBarVisible,
                   })}
                 >

diff --git a/packages/core/components/Puck/styles.module.css b/packages/core/components/Puck/styles.module.css
@@ -18,7 +18,7 @@
 
 .Puck {
   --puck-frame-width: auto;
-  --puck-side-bar-width: 186px;
+  --puck-side-bar-width: 0px;
   --puck-space-px: 16px;
   bottom: 0;
   display: grid;
@@ -33,6 +33,10 @@
   top: 0;
 }
 
+.Puck--mounted {
+  --puck-side-bar-width: 186px;
+}
+
 .Puck--leftSideBarVisible {
   grid-template-columns:
     var(--puck-side-bar-width) var(--puck-frame-width)
@@ -52,7 +56,7 @@
 }
 
 @media (min-width: 458px) {
-  .Puck {
+  .Puck-mounted {
     --puck-frame-width: minmax(266px, auto);
   }
 }