fix: Reduce flashing of loaders in sidebar on first load

app/components/Sidebar/Sidebar.tsx

@@ -178,6 +178,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
       <Container
         ref={ref}
         style={style}
+        $visible={ui.readyToShow}
         $isHovering={isHovering}
         $isAnimating={isAnimating}
         $isSmallerThanMinimum={isSmallerThanMinimum}
@@ -249,6 +250,7 @@ type ContainerProps = {
   $isSmallerThanMinimum: boolean;
   $isHovering: boolean;
   $collapsed: boolean;
+  $visible: boolean;
 };
 
 const hoverStyles = (props: ContainerProps) => `
@@ -267,13 +269,14 @@ const hoverStyles = (props: ContainerProps) => `
 `;
 
 const Container = styled(Flex)<ContainerProps>`
+  opacity: ${(props) => (props.$visible ? 1 : 0)};
   position: fixed;
   top: 0;
   bottom: 0;
   width: 100%;
   background: ${s("sidebarBackground")};
-  transition: box-shadow 100ms ease-in-out, opacity 100ms ease-in-out,
-    transform 100ms ease-out,
+  transition: box-shadow 150ms ease-in-out, opacity 150ms ease-in-out,
+    transform 150ms ease-out,
     ${s("backgroundTransition")}
       ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
@@ -316,7 +319,7 @@ const Container = styled(Flex)<ContainerProps>`
 
       & > div {
         opacity: 1;
-      }    
+      }
     }
   `};
 `;

app/stores/UiStore.ts

@@ -3,6 +3,7 @@ import { light as defaultTheme } from "@shared/styles/theme";
 import Storage from "@shared/utils/Storage";
 import Document from "~/models/Document";
 import type { ConnectionStatus } from "~/scenes/Document/components/MultiplayerEditor";
+import type RootStore from "./RootStore";
 
 const UI_STORE = "UI_STORE";
 
@@ -82,7 +83,11 @@ class UiStore {
   @observable
   multiplayerErrorCode?: number;
 
-  constructor() {
+  rootStore: RootStore;
+
+  constructor(rootStore: RootStore) {
+    this.rootStore = rootStore;
+
     // Rehydrate
     const data: PersistedData = Storage.get(UI_STORE) || {};
     this.languagePromptDismissed = data.languagePromptDismissed;
@@ -270,6 +275,14 @@ class UiStore {
     this.mobileSidebarVisible = false;
   };
 
+  @computed
+  get readyToShow() {
+    return (
+      !this.rootStore.auth.user ||
+      (this.rootStore.collections.isLoaded && this.rootStore.documents.isLoaded)
+    );
+  }
+
   /**
    * Returns the current state of the sidebar taking into account user preference
    * and whether the sidebar has been hidden as part of launching in a new