Settings: Add skeleton loader (#79234)

* add skeleton for settings page

* go back to using style so it all overrides properly

public/app/features/admin/AdminSettings.tsx

@@ -4,39 +4,24 @@ import { useAsync } from 'react-use';
 import { getBackendSrv } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 
-type Settings = { [key: string]: { [key: string]: string } };
+import { AdminSettingsTable } from './AdminSettingsTable';
+
+export type Settings = { [key: string]: { [key: string]: string } };
 
 function AdminSettings() {
   const { loading, value: settings } = useAsync(() => getBackendSrv().get<Settings>('/api/admin/settings'), []);
 
   return (
     <Page navId="server-settings">
-      <Page.Contents isLoading={loading}>
+      <Page.Contents>
         <div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
           These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
           these you currently need to restart Grafana.
         </div>
 
-        {settings && (
+        {loading && <AdminSettingsTable.Skeleton />}
-          <table className="filter-table">
+
-            <tbody>
+        {settings && <AdminSettingsTable settings={settings} />}
-              {Object.entries(settings).map(([sectionName, sectionSettings], i) => (
-                <React.Fragment key={`section-${i}`}>
-                  <tr>
-                    <td className="admin-settings-section">{sectionName}</td>
-                    <td />
-                  </tr>
-                  {Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
-                    <tr key={`property-${j}`}>
-                      <td style={{ paddingLeft: '25px' }}>{settingName}</td>
-                      <td style={{ whiteSpace: 'break-spaces' }}>{settingValue}</td>
-                    </tr>
-                  ))}
-                </React.Fragment>
-              ))}
-            </tbody>
-          </table>
-        )}
       </Page.Contents>
     </Page>
   );

public/app/features/admin/AdminSettingsTable.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+import { Settings } from './AdminSettings';
+
+interface Props {
+  settings: Settings;
+}
+
+export const AdminSettingsTable = ({ settings }: Props) => {
+  return (
+    <table className="filter-table">
+      <tbody>
+        {Object.entries(settings).map(([sectionName, sectionSettings], i) => (
+          <React.Fragment key={`section-${i}`}>
+            <tr>
+              <td className="admin-settings-section">{sectionName}</td>
+              <td />
+            </tr>
+            {Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
+              <tr key={`property-${j}`}>
+                <td style={{ paddingLeft: '25px' }}>{settingName}</td>
+                <td style={{ whiteSpace: 'break-spaces' }}>{settingValue}</td>
+              </tr>
+            ))}
+          </React.Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+// note: don't want to put this in render function else it will get regenerated
+const randomValues = new Array(50).fill(null).map(() => Math.random());
+
+const AdminSettingsTableSkeleton = () => {
+  return (
+    <table className="filter-table">
+      <tbody>
+        {randomValues.map((randomValue, index) => {
+          const isSection = index === 0 || randomValue > 0.9;
+
+          return (
+            <React.Fragment key={index}>
+              {isSection && (
+                <tr>
+                  <td className="admin-settings-section">
+                    <Skeleton width={getRandomInRange(40, 80, randomValue)} />
+                  </td>
+                  <td />
+                </tr>
+              )}
+              <tr>
+                <td style={{ paddingLeft: '25px' }}>
+                  <Skeleton width={getRandomInRange(60, 100, randomValue)} />
+                </td>
+                <td>
+                  <Skeleton width={getRandomInRange(80, 320, randomValue)} />
+                </td>
+              </tr>
+            </React.Fragment>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+function getRandomInRange(min: number, max: number, randomSeed: number) {
+  return randomSeed * (max - min) + min;
+}
+
+AdminSettingsTable.Skeleton = AdminSettingsTableSkeleton;