From 9ab8292949670c32ccb8c425f4908168ee49add3 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 6 Dec 2023 16:07:32 +0000
Subject: [PATCH] Orgs: Add skeleton loader (#79141)

add skeleton for orgs list
---
 .../app/features/admin/AdminListOrgsPage.tsx  | 41 +++++++------
 public/app/features/admin/AdminOrgsTable.tsx  | 58 ++++++++++++++++---
 2 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/public/app/features/admin/AdminListOrgsPage.tsx b/public/app/features/admin/AdminListOrgsPage.tsx
index 486c6a37d1f..6423924c004 100644
--- a/public/app/features/admin/AdminListOrgsPage.tsx
+++ b/public/app/features/admin/AdminListOrgsPage.tsx
@@ -5,7 +5,7 @@ import { getBackendSrv, isFetchError } from '@grafana/runtime';
 import { LinkButton } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/services/context_srv';
-import { AccessControlAction } from 'app/types';
+import { AccessControlAction, Organization } from 'app/types';
 
 import { AdminOrgsTable } from './AdminOrgsTable';
 
@@ -14,7 +14,7 @@ const deleteOrg = async (orgId: number) => {
 };
 
 const getOrgs = async () => {
-  return await getBackendSrv().get('/api/orgs');
+  return await getBackendSrv().get<Organization[]>('/api/orgs');
 };
 
 const getErrorMessage = (error: Error) => {
@@ -30,26 +30,25 @@ export default function AdminListOrgsPages() {
   }, [fetchOrgs]);
 
   return (
-    <Page navId="global-orgs">
+    <Page
+      navId="global-orgs"
+      actions={
+        <LinkButton icon="plus" href="org/new" disabled={!canCreateOrg}>
+          New org
+        </LinkButton>
+      }
+    >
       <Page.Contents>
-        <>
-          <div className="page-action-bar">
-            <div className="page-action-bar__spacer" />
-            <LinkButton icon="plus" href="org/new" disabled={!canCreateOrg}>
-              New org
-            </LinkButton>
-          </div>
-          {state.error && getErrorMessage(state.error)}
-          {state.loading && 'Fetching organizations'}
-          {state.value && (
-            <AdminOrgsTable
-              orgs={state.value}
-              onDelete={(orgId) => {
-                deleteOrg(orgId).then(() => fetchOrgs());
-              }}
-            />
-          )}
-        </>
+        {state.error && getErrorMessage(state.error)}
+        {state.loading && <AdminOrgsTable.Skeleton />}
+        {state.value && (
+          <AdminOrgsTable
+            orgs={state.value}
+            onDelete={(orgId) => {
+              deleteOrg(orgId).then(() => fetchOrgs());
+            }}
+          />
+        )}
       </Page.Contents>
     </Page>
   );
diff --git a/public/app/features/admin/AdminOrgsTable.tsx b/public/app/features/admin/AdminOrgsTable.tsx
index 6a042ca6af2..225800056f8 100644
--- a/public/app/features/admin/AdminOrgsTable.tsx
+++ b/public/app/features/admin/AdminOrgsTable.tsx
@@ -1,6 +1,9 @@
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
 
-import { Button, ConfirmModal } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ConfirmModal, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, Organization } from 'app/types';
 
@@ -9,19 +12,23 @@ interface Props {
   onDelete: (orgId: number) => void;
 }
 
+const getTableHeader = () => (
+  <thead>
+    <tr>
+      <th>ID</th>
+      <th>Name</th>
+      <th style={{ width: '1%' }}></th>
+    </tr>
+  </thead>
+);
+
 export function AdminOrgsTable({ orgs, onDelete }: Props) {
   const canDeleteOrgs = contextSrv.hasPermission(AccessControlAction.OrgsDelete);
 
   const [deleteOrg, setDeleteOrg] = useState<Organization>();
   return (
     <table className="filter-table form-inline filter-table--hover">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Name</th>
-          <th style={{ width: '1%' }}></th>
-        </tr>
-      </thead>
+      {getTableHeader()}
       <tbody>
         {orgs.map((org) => (
           <tr key={`${org.id}-${org.name}`}>
@@ -66,3 +73,38 @@ export function AdminOrgsTable({ orgs, onDelete }: Props) {
     </table>
   );
 }
+
+const AdminOrgsTableSkeleton = () => {
+  const styles = useStyles2(getSkeletonStyles);
+  return (
+    <table className="filter-table">
+      {getTableHeader()}
+      <tbody>
+        {new Array(3).fill(null).map((_, index) => (
+          <tr key={index}>
+            <td>
+              <Skeleton width={16} />
+            </td>
+            <td>
+              <Skeleton width={240} />
+            </td>
+            <td>
+              <Skeleton containerClassName={styles.deleteButton} width={22} height={24} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+AdminOrgsTable.Skeleton = AdminOrgsTableSkeleton;
+
+const getSkeletonStyles = (theme: GrafanaTheme2) => ({
+  deleteButton: css({
+    alignItems: 'center',
+    display: 'flex',
+    height: 30,
+    lineHeight: 1,
+  }),
+});