docs: add loading state to CSS variables table (#2858)

openedx · Nov 27, 2023 · f86824f · f86824f
1 parent 60112a5
commit f86824f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/styles/scss/core/core.scss b/styles/scss/core/core.scss
@@ -6,6 +6,7 @@
 @import "~bootstrap/scss/reboot";
 @import "typography";
 @import "grid";
+@import "~react-loading-skeleton/dist/skeleton.css";
 @import "~bootstrap/scss/transitions";
 @import "utilities";
 @import "~bootstrap/scss/media";

diff --git a/www/src/components/ComponentVariablesTable.tsx b/www/src/components/ComponentVariablesTable.tsx
@@ -1,9 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { DataTable } from '~paragon-react';
+import { DataTable, Skeleton } from '~paragon-react';
 import { SettingsContext } from '../context/SettingsContext';
 
+const initialTableData = Array(5).fill({ variableName: <Skeleton />, computedValue: <Skeleton /> });
+
 function ComponentVariablesTable({ rawStylesheet }: ComponentVariablesTableProps) {
-  const [tableData, setTableData] = useState<Array<TableRowData>>([]);
+  const [tableData, setTableData] = useState<Array<TableRowData>>(initialTableData);
   const { settings: { theme } } = useContext(SettingsContext);
 
   useEffect(() => {

diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss
@@ -8,6 +8,7 @@
 @import "../components/Search/Search";
 @import "../components/IconsTable";
 @import "../components/exampleComponents/ExamplePropsForm";
+@import "~react-loading-skeleton/dist/skeleton";
 
 :root {
   --pgn-elevation-modal-zindex: 2503;