grafana/public/app/features/admin/AdminSettingsTable.tsx

import { Fragment } from 'react';
import Skeleton from 'react-loading-skeleton';

import { ScrollContainer, Text } from '@grafana/ui';
import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';

import { Settings } from './AdminSettings';

interface Props {
  settings: Settings;
}

const AdminSettingsTableComponent = ({ settings }: Props) => {
  return (
    <ScrollContainer overflowY="visible" overflowX="auto" width="100%">
      <table className="filter-table">
        <tbody>
          {Object.entries(settings).map(([sectionName, sectionSettings], i) => (
            <Fragment key={`section-${i}`}>
              <tr>
                <td>
                  <Text color="info" weight="bold">
                    {sectionName}
                  </Text>
                </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>
              ))}
            </Fragment>
          ))}
        </tbody>
      </table>
    </ScrollContainer>
  );
};

// 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: SkeletonComponent = ({ rootProps }) => {
  return (
    <ScrollContainer overflowY="visible" overflowX="auto" width="100%">
      <table className="filter-table" {...rootProps}>
        <tbody>
          {randomValues.map((randomValue, index) => {
            const isSection = index === 0 || randomValue > 0.9;

            return (
              <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>
              </Fragment>
            );
          })}
        </tbody>
      </table>
    </ScrollContainer>
  );
};

function getRandomInRange(min: number, max: number, randomSeed: number) {
  return randomSeed * (max - min) + min;
}

export const AdminSettingsTable = attachSkeleton(AdminSettingsTableComponent, AdminSettingsTableSkeleton);