fix: Flashing sidebar on load (suspense boundary)

app/components/AuthenticatedLayout.tsx

@@ -118,7 +118,9 @@ const AuthenticatedLayout: React.FC = ({ children }) => {
         <RegisterKeyDown trigger="t" handler={goToSearch} />
         <RegisterKeyDown trigger="/" handler={goToSearch} />
         {children}
-        <CommandBar />
+        <React.Suspense fallback={null}>
+          <CommandBar />
+        </React.Suspense>
       </Layout>
     </DocumentContext.Provider>
   );

app/components/Notifications/Notifications.tsx

@@ -67,19 +67,21 @@ function Notifications(
           </Tooltip>
         </Text>
       </Header>
-      <Scrollable ref={ref} flex topShadow>
-        <PaginatedList
-          fetch={notifications.fetchPage}
-          items={notifications.orderedData}
-          renderItem={(item: Notification) => (
-            <NotificationListItem
-              key={item.id}
-              notification={item}
-              onNavigate={onRequestClose}
-            />
-          )}
-        />
-      </Scrollable>
+      <React.Suspense fallback={null}>
+        <Scrollable ref={ref} flex topShadow>
+          <PaginatedList
+            fetch={notifications.fetchPage}
+            items={notifications.orderedData}
+            renderItem={(item: Notification) => (
+              <NotificationListItem
+                key={item.id}
+                notification={item}
+                onNavigate={onRequestClose}
+              />
+            )}
+          />
+        </Scrollable>
+      </React.Suspense>
       {isEmpty && (
         <EmptyNotifications>{t("No notifications yet")}.</EmptyNotifications>
       )}

app/components/Sidebar/components/PlaceholderCollections.tsx

@@ -1,17 +1,14 @@
 import * as React from "react";
 import styled from "styled-components";
-import DelayedMount from "~/components/DelayedMount";
 import PlaceholderText from "~/components/PlaceholderText";
 
 function PlaceholderCollections(props: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <DelayedMount>
-      <Wrapper {...props}>
-        <PlaceholderText />
-        <PlaceholderText delay={0.2} />
-        <PlaceholderText delay={0.4} />
-      </Wrapper>
-    </DelayedMount>
+    <Wrapper {...props}>
+      <PlaceholderText />
+      <PlaceholderText delay={0.2} />
+      <PlaceholderText delay={0.4} />
+    </Wrapper>
   );
 }
 

app/components/Sidebar/components/Starred.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import Star from "~/models/Star";
+import DelayedMount from "~/components/DelayedMount";
 import Flex from "~/components/Flex";
 import useStores from "~/hooks/useStores";
 import DropCursor from "./DropCursor";
@@ -90,7 +91,9 @@ function Starred() {
             )}
             {(stars.isFetching || fetchError) && !stars.orderedData.length && (
               <Flex column>
-                <PlaceholderCollections />
+                <DelayedMount>
+                  <PlaceholderCollections />
+                </DelayedMount>
               </Flex>
             )}
           </Relative>