fix: Flashing sidebar on load (suspense boundary)

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>