Nested folders: add skeleton scaffolding (#69310)

add skeleton scaffolding

package.json

@@ -375,6 +375,7 @@
     "react-hook-form": "7.5.3",
     "react-i18next": "^12.0.0",
     "react-inlinesvg": "3.0.2",
+    "react-loading-skeleton": "3.3.1",
     "react-moveable": "0.46.1",
     "react-popper": "2.3.0",
     "react-popper-tooltip": "4.4.2",

public/app/core/utils/ConfigProvider.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { SkeletonTheme } from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { ThemeChangedEvent, config } from '@grafana/runtime';
@@ -6,6 +7,8 @@ import { ThemeContext } from '@grafana/ui';
 
 import { appEvents } from '../core';
 
+import 'react-loading-skeleton/dist/skeleton.css';
+
 export const ThemeProvider = ({ children, value }: { children: React.ReactNode; value: GrafanaTheme2 }) => {
   const [theme, setTheme] = useState(value);
 
@@ -18,7 +21,17 @@ export const ThemeProvider = ({ children, value }: { children: React.ReactNode;
     return () => sub.unsubscribe();
   }, []);
 
-  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+  return (
+    <ThemeContext.Provider value={theme}>
+      <SkeletonTheme
+        baseColor={theme.colors.background.secondary}
+        highlightColor={theme.colors.emphasize(theme.colors.background.secondary)}
+        borderRadius={theme.shape.borderRadius()}
+      >
+        {children}
+      </SkeletonTheme>
+    </ThemeContext.Provider>
+  );
 };
 
 export const provideTheme = (component: React.ComponentType<any>, theme: GrafanaTheme2) => {

public/app/features/browse-dashboards/components/BrowseActions/DescendantCount.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import Skeleton from 'react-loading-skeleton';
 
-import { Alert, Spinner, useTheme2 } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import { P } from '@grafana/ui/src/unstable';
 
 import { useGetAffectedItemsQuery } from '../../api/browseDashboardsAPI';
@@ -13,16 +14,14 @@ export interface Props {
 }
 
 export const DescendantCount = ({ selectedItems }: Props) => {
-  const theme = useTheme2();
   const { data, isFetching, isLoading, error } = useGetAffectedItemsQuery(selectedItems);
 
   return (
     <>
-      {data && (
-        <P color="secondary">{buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}</P>
-      )}
-
-      {(isFetching || isLoading) && <Spinner size={theme.typography.body.fontSize} />}
+      <P color="secondary">
+        {data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
+        {(isFetching || isLoading) && <Skeleton width={200} />}
+      </P>
       {error && <Alert severity="error" title="Unable to retrieve descendant information" />}
     </>
   );

yarn.lock

@@ -18298,6 +18298,7 @@ __metadata:
     react-hook-form: 7.5.3
     react-i18next: ^12.0.0
     react-inlinesvg: 3.0.2
+    react-loading-skeleton: 3.3.1
     react-moveable: 0.46.1
     react-popper: 2.3.0
     react-popper-tooltip: 4.4.2
@@ -26454,6 +26455,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-loading-skeleton@npm:3.3.1":
+  version: 3.3.1
+  resolution: "react-loading-skeleton@npm:3.3.1"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 0de3437a5da8b7133bf86043e4e002e5422b50cd71b9a650f2947a89ace39be8b7c61a098f1d7dd0be559dc3ac293d60697fdae23cb09c3905b2952e1a68693d
+  languageName: node
+  linkType: hard
+
 "react-moveable@npm:0.46.1, react-moveable@npm:~0.46.1":
   version: 0.46.1
   resolution: "react-moveable@npm:0.46.1"