From 2c466617de02f9a9a6b933c966a7190f98152b1d Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Fri, 28 Apr 2023 04:31:01 -0500
Subject: [PATCH] fix: remove shake in first render (#2190)

---
 .../src/components/root-app-sidebar/index.tsx |  2 +-
 .../src/components/app-sidebar/index.jotai.ts |  5 +++-
 .../src/components/app-sidebar/index.tsx      | 25 ++++++++++++++++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/root-app-sidebar/index.tsx b/apps/web/src/components/root-app-sidebar/index.tsx
index 32ffa42b0c..c8b1975255 100644
--- a/apps/web/src/components/root-app-sidebar/index.tsx
+++ b/apps/web/src/components/root-app-sidebar/index.tsx
@@ -75,7 +75,7 @@ export const RootAppSidebar = ({
   }, [createPage, openPage]);
   const sidebarOpen = useAtomValue(appSidebarOpenAtom);
   useEffect(() => {
-    if (environment.isDesktop) {
+    if (environment.isDesktop && typeof sidebarOpen === 'boolean') {
       window.apis?.onSidebarVisibilityChange(sidebarOpen);
     }
   }, [sidebarOpen]);
diff --git a/packages/component/src/components/app-sidebar/index.jotai.ts b/packages/component/src/components/app-sidebar/index.jotai.ts
index 864a3eb668..603beaf964 100644
--- a/packages/component/src/components/app-sidebar/index.jotai.ts
+++ b/packages/component/src/components/app-sidebar/index.jotai.ts
@@ -1,6 +1,9 @@
 import { atomWithStorage } from 'jotai/utils';
 
-export const appSidebarOpenAtom = atomWithStorage('app-sidebar-open', true);
+export const appSidebarOpenAtom = atomWithStorage(
+  'app-sidebar-open',
+  undefined as boolean | undefined
+);
 export const appSidebarWidthAtom = atomWithStorage(
   'app-sidebar-width',
   256 /* px */
diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx
index 866d8f0c51..ad80a52b48 100644
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@@ -8,7 +8,13 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useAtom, useAtomValue } from 'jotai';
 import type { PropsWithChildren, ReactElement } from 'react';
 import type { ReactNode } from 'react';
-import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import { IconButton } from '../../ui/button/IconButton';
 import {
@@ -34,6 +40,7 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
     const [open, setOpen] = useAtom(appSidebarOpenAtom);
 
     const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
+    const initialRender = open === undefined;
 
     const handleSidebarOpen = useCallback(() => {
       setOpen(open => !open);
@@ -41,8 +48,20 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
 
     useImperativeHandle(forwardedRef, () => ref.current as HTMLElement);
 
+    useEffect(() => {
+      if (open === undefined && ref.current) {
+        const initialOpen =
+          window.getComputedStyle(ref.current).position === 'relative';
+
+        setOpen(initialOpen);
+      }
+    }, [open, setOpen]);
+
     const environment = getEnvironment();
     const isMacosDesktop = environment.isDesktop && environment.isMacOs;
+    if (initialRender) {
+      return <div />;
+    }
     return (
       <>
         <nav
@@ -96,9 +115,7 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
           data-testid="app-sidebar-float-mask"
           data-open={open}
           className={sidebarFloatMaskStyle}
-          onClick={useCallback(() => {
-            setOpen(false);
-          }, [setOpen])}
+          onClick={() => setOpen(false)}
         />
       </>
     );