fix: remove shake in first render (#2190)

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 */

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)}
         />
       </>
     );