feat: loading folder

spacemakerai · Nov 7, 2023 · a80ff19 · a80ff19
1 parent 0ca0d17
commit a80ff19
Showing 1 changed file with 31 additions and 8 deletions.
diff --git a/analyses/dynamo/src/floatingpanel/app.tsx b/analyses/dynamo/src/floatingpanel/app.tsx
@@ -13,6 +13,27 @@ try {
  console.error(e);
 }
 
+function LoadingScriptList() {
+ return (
+ <div style={{ width: "100%" }}>
+ {[...Array(3)].map(() => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ width: "100%",
+ height: "40px",
+ alignItems: "center",
+ }}
+ >
+ <weave-skeleton-item height="30px"></weave-skeleton-item>
+ </div>
+ );
+ })}
+ </div>
+ );
+}
+
 function ScriptListItem({ name, code, setScript }: any) {
  const [hover, setHover] = useState(false);
 
@@ -106,14 +127,16 @@ function ScriptList({ setScript, dynamoHandler }: any) {
  {error && <div style={{ color: "red" }}>{error}</div>}
  {folder && (
  <div>
- {Object.entries(programs).map(([name, code]) => (
- <ScriptListItem
- key={name}
- name={name}
- code={code}
- setScript={setScript}
- />
- ))}
+ {isLoading && <LoadingScriptList />}
+ {!isLoading &&
+ Object.entries(programs).map(([name, code]) => (
+ <ScriptListItem
+ key={name}
+ name={name}
+ code={code}
+ setScript={setScript}
+ />
+ ))}
  {!isLoading && !error && Object.keys(programs).length === 0 && (
  <div style={{ color: "gray" }}>No graphs found in folder.</div>
  )}