From f86824fc6cecfe31720dacfae147b2b288cf6b10 Mon Sep 17 00:00:00 2001
From: Viktor Rusakov <52399399+viktorrusakov@users.noreply.github.com>
Date: Mon, 27 Nov 2023 11:05:51 +0200
Subject: [PATCH] docs: add loading state to CSS variables table (#2858)

---
 styles/scss/core/core.scss                     | 1 +
 www/src/components/ComponentVariablesTable.tsx | 6 ++++--
 www/src/scss/base.scss                         | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/styles/scss/core/core.scss b/styles/scss/core/core.scss
index 3792b0f4ed..5b870e9246 100644
--- 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
index 02db2a37a5..d561aca599 100644
--- 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
index e656617509..11f132a15b 100644
--- 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;