feat: Use skeletons to indicate that the main navigation sidebar is loading (#44010)

frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx

@@ -8,7 +8,7 @@ import {
   breakpointMinSmall,
   space,
 } from "metabase/styled-components/theme";
-import { Icon } from "metabase/ui";
+import { Box, type BoxProps, Icon } from "metabase/ui";
 
 import { SidebarLink } from "./SidebarItems";
 
@@ -82,7 +82,7 @@ export const SidebarContentRoot = styled.div`
   justify-content: space-between;
 `;
 
-export const SidebarSection = styled.div`
+export const SidebarSection = styled(Box)<BoxProps>`
   margin-top: ${space(1)};
   margin-bottom: ${space(2)};
   padding-inline-start: ${space(2)};

frontend/src/metabase/nav/containers/MainNavbar/NavbarLoadingView.tsx

-import { t } from "ttag";
+import { Skeleton, Flex } from "metabase/ui";
+import { Repeat } from "metabase/ui/components/feedback/Skeleton/Repeat";
 
-import LoadingSpinner from "metabase/components/LoadingSpinner";
+import { SidebarSection } from "./MainNavbar.styled";
 
-import {
-  LoadingAndErrorContainer,
-  LoadingAndErrorContent,
-  LoadingAndErrorTitle,
-} from "./MainNavbar.styled";
+const NavLinkSkeleton = () => (
+  <Flex my="1rem" gap="sm" px="1rem">
+    <Skeleton radius="100%" w="1rem" h="1rem" />
+    <Skeleton h="1rem" natural />
+  </Flex>
+);
+
+const SectionTitleSkeleton = () => (
+  <Skeleton
+    h=".75rem"
+    mt="2rem"
+    mb="1rem"
+    w="8rem"
+    style={{ marginInlineStart: "1rem" }}
+  />
+);
 
 export function NavbarLoadingView() {
   return (
-    <LoadingAndErrorContainer>
-      <LoadingAndErrorContent>
-        <LoadingSpinner />
-        <LoadingAndErrorTitle>{t`Loading…`}</LoadingAndErrorTitle>
-      </LoadingAndErrorContent>
-    </LoadingAndErrorContainer>
+    <div aria-busy data-testid="loading-spinner">
+      <SidebarSection>
+        <NavLinkSkeleton />
+      </SidebarSection>
+      <SidebarSection>
+        <SectionTitleSkeleton />
+        <NavLinkSkeleton />
+        <NavLinkSkeleton />
+      </SidebarSection>
+      <SidebarSection>
+        <SectionTitleSkeleton />
+        <Repeat times={3}>
+          <NavLinkSkeleton />
+        </Repeat>
+      </SidebarSection>
+      <SidebarSection>
+        <SectionTitleSkeleton />
+        <Repeat times={7}>
+          <NavLinkSkeleton />
+        </Repeat>
+      </SidebarSection>
+    </div>
   );
 }

frontend/src/metabase/ui/components/feedback/Skeleton/Repeat.tsx

@@ -11,10 +11,12 @@ export const Repeat = ({
   if (!isValidElement(children)) {
     return null;
   }
-  return Array.from({ length: times }).map((_, index) => {
-    const props = { key: `${index}` };
-    if (isValidElement(children)) {
-      return cloneElement(children, props);
-    }
-  });
+  return (
+    <>
+      {Array.from({ length: times }).map((_, index) => {
+        const props = { key: `${index}` };
+        return cloneElement(children, props);
+      })}
+    </>
+  );
 };