chore(docs): avoid stale persisted values

Use a skeleton state to mask the initial render of applying persisted theme and icon size values.
carbon-design-system · Dec 30, 2023 · 0e1f763 · 0e1f763
1 parent 7dc900b
commit 0e1f763
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 27 deletions.
diff --git a/docs/src/components/index.svelte b/docs/src/components/index.svelte
@@ -12,6 +12,7 @@
     Theme,
     Select,
     SelectItem,
+    SelectSkeleton,
     LocalStorage,
   } from "carbon-components-svelte";
   import fuzzy from "fuzzy";
@@ -34,9 +35,7 @@
   let theme = "white";
   let iconSize = 16;
 
-  $: if (typeof document !== "undefined") {
-    document.documentElement.setAttribute("theme", theme);
-  }
+  $: mounted = typeof document !== "undefined";
 
   let moduleName = null;
 
@@ -69,31 +68,35 @@
     <Row>
       <Column>
         <div class="options">
-          <Theme
-            bind:theme
-            persist
-            render="select"
-            select={{
-              id: "select-theme",
-              size: "xl",
-              labelText: "Carbon theme",
-              themes: ["white", "g10", "g80", "g90", "g100"],
-            }}
-          />
-          <LocalStorage key="icon-size" bind:value={iconSize} />
-          <Select
-            id="select-icon-size"
-            labelText="Icon size"
-            size="xl"
-            bind:selected={iconSize}
-          >
-            <SelectItem value={16} />
-            <SelectItem value={20} />
-            <SelectItem value={24} />
-            <SelectItem value={32} />
-          </Select>
+          {#if mounted}
+            <Theme
+              bind:theme
+              persist
+              render="select"
+              select={{
+                id: "select-theme",
+                labelText: "Carbon theme",
+                themes: ["white", "g10", "g80", "g90", "g100"],
+              }}
+            />
+            <LocalStorage key="icon-size" bind:value={iconSize} />
+            <Select
+              id="select-icon-size"
+              labelText="Icon size"
+              bind:selected={iconSize}
+            >
+              <SelectItem value={16} />
+              <SelectItem value={20} />
+              <SelectItem value={24} />
+              <SelectItem value={32} />
+            </Select>
+          {:else}
+            <SelectSkeleton class="select-skeleton" />
+            <SelectSkeleton class="select-skeleton" />
+          {/if}
           <Search
             id="search"
+            size="lg"
             autocomplete="off"
             autocorrect="off"
             autocapitalize="off"
@@ -232,6 +235,13 @@
     overflow-y: scroll;
   }
 
+  :global(.select-skeleton) {
+    position: relative;
+    height: 64px;
+    top: 2px;
+    min-width: 6.42rem;
+  }
+
   :global(#select-theme),
   :global(#select-icon-size) {
     min-width: 4rem;

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -6,7 +6,6 @@ import Home from "../components/index.svelte";
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta