[Browse] Use a loading skeleton instead of a spinner for Browse models in the nav (#43970)

* Add our first Mantine Skeleton

* Sort

* Simplify Skeleton.tsx

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BrowseNavSection.tsx

@@ -5,7 +5,7 @@ import { useHasModels } from "metabase/common/hooks/use-has-models";
 import CollapseSection from "metabase/components/CollapseSection";
 import { DelayedLoadingAndErrorWrapper } from "metabase/components/LoadingAndErrorWrapper/DelayedLoadingAndErrorWrapper";
 import CS from "metabase/css/core/index.css";
-import { Flex, Loader } from "metabase/ui";
+import { Flex, Skeleton } from "metabase/ui";
 
 import { PaddedSidebarLink, SidebarHeading } from "../MainNavbar.styled";
 import type { SelectedItem } from "../types";
@@ -53,8 +53,9 @@ export const BrowseNavSection = ({
         loading={areModelsLoading}
         error={modelsError}
         loader={
-          <Flex py="sm" px="md" h="32.67px" align="center">
-            <Loader size={14} style={{ paddingInlineStart: "2px" }} />
+          <Flex py="sm" px="md" h="32.67px" gap="sm" align="center">
+            <Skeleton radius="md" h="md" w="md" />
+            <Skeleton radius="xs" w="4rem" h="1.2rem" />
           </Flex>
         }
         delay={0}

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

+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getSkeletonOverrides = (): MantineThemeOverride["components"] => ({
+  Skeleton: {
+    styles: _theme => {
+      return {
+        root: {
+          "&::before": {
+            background: "transparent !important",
+          },
+          "&::after": {
+            background: "var(--mb-color-border) !important",
+          },
+        },
+      };
+    },
+  },
+});

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

+export type { SkeletonProps } from "@mantine/core";
+export { Skeleton } from "@mantine/core";
+export { getSkeletonOverrides } from "./Skeleton.styled";

frontend/src/metabase/ui/components/feedback/Skeleton/index.ts

+export { Skeleton } from "@mantine/core";
+export * from "./Skeleton.styled";

frontend/src/metabase/ui/components/feedback/index.ts

 export * from "./Loader";
 export * from "./Alert";
 export * from "./Progress";
+export * from "./Skeleton";

frontend/src/metabase/ui/theme.ts

@@ -27,9 +27,10 @@ import {
   getPaperOverrides,
   getProgressOverrides,
   getPopoverOverrides,
+  getScrollAreaOverrides,
   getSegmentedControlOverrides,
   getSelectOverrides,
-  getScrollAreaOverrides,
+  getSkeletonOverrides,
   getSwitchOverrides,
   getTabsOverrides,
   getTextareaOverrides,
@@ -132,6 +133,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getPaperOverrides(),
     ...getPopoverOverrides(),
     ...getProgressOverrides(),
+    ...getSkeletonOverrides(),
     ...getScrollAreaOverrides(),
     ...getSegmentedControlOverrides(),
     ...getSelectOverrides(),