From fd7164a312c80e7de2f27adaa0be58de05ec8d59 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 11 Jan 2020 18:39:33 -0800
Subject: [PATCH] feat(code-snippet): add skeleton state

---
 src/components/CodeSnippet/CodeSnippet.svelte | 122 ++++++++++--------
 1 file changed, 66 insertions(+), 56 deletions(-)

diff --git a/src/components/CodeSnippet/CodeSnippet.svelte b/src/components/CodeSnippet/CodeSnippet.svelte
index aeeb254f..0cc3abb3 100644
--- a/src/components/CodeSnippet/CodeSnippet.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.svelte
@@ -10,6 +10,7 @@
   export let light = false;
   export let showLessText = 'Show less';
   export let showMoreText = 'Show more';
+  export let skeleton = false;
   export let style = undefined;
   export let type = 'single';
 
@@ -19,71 +20,80 @@
   import Button from '../Button';
   import Copy from '../Copy';
   import CopyButton from '../CopyButton';
+  import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
 
   let codeRef = undefined;
   let expanded = false;
   let showMoreLess = false;
 
   afterUpdate(() => {
-    showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
+    if (type === 'multi' && codeRef) {
+      showMoreLess = codeRef.getBoundingClientRect().height > 255;
+    }
   });
 
   $: expandText = expanded ? showLessText : showMoreText;
 </script>
 
-{#if type === 'inline'}
-  <Copy
-    aria-label={$$props['aria-label'] || copyLabel}
-    aria-describedby={id}
-    class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    {feedback}
-    {feedbackTimeout}
-    {style}>
-    <code {id}>
-      <slot>{code}</slot>
-    </code>
-  </Copy>
-{:else}
-  <div
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
-    {style}>
-    <div
-      role="textbox"
-      tabindex="0"
-      class={cx('--snippet-container')}
-      aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
-      <code>
-        <pre bind:this={codeRef}>
-          <slot>{code}</slot>
-        </pre>
-      </code>
-    </div>
-    <CopyButton
-      iconDescription={copyButtonDescription}
-      class={cx('--snippet-button')}
-      on:click
-      {feedback}
-      {feedbackTimeout} />
-    {#if showMoreLess}
-      <Button
-        kind="ghost"
-        size="small"
-        class={cx('--snippet-btn--expand')}
-        on:click={() => {
-          expanded = !expanded;
-        }}>
-        <span class={cx('--snippet-btn--text')}>{expandText}</span>
-        <ChevronDown16
-          aria-label={expandText}
-          class={cx('--icon-chevron--down', '--snippet__icon')} />
-      </Button>
-    {/if}
-  </div>
+{#if skeleton}
+  <CodeSnippetSkeleton class={className} {type} {style} />
+{/if}
+
+{#if !skeleton}
+  {#if type === 'inline'}
+    <Copy
+      aria-label={$$props['aria-label'] || copyLabel}
+      aria-describedby={id}
+      class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
+      on:click
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+      {feedback}
+      {feedbackTimeout}
+      {style}>
+      <code {id}>
+        <slot>{code}</slot>
+      </code>
+    </Copy>
+  {:else}
+    <div
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+      class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
+      {style}>
+      <div
+        role="textbox"
+        tabindex="0"
+        class={cx('--snippet-container')}
+        aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
+        <code>
+          <pre bind:this={codeRef}>
+            <slot>{code}</slot>
+          </pre>
+        </code>
+      </div>
+      <CopyButton
+        iconDescription={copyButtonDescription}
+        class={cx('--snippet-button')}
+        on:click
+        {feedback}
+        {feedbackTimeout} />
+      {#if showMoreLess}
+        <Button
+          kind="ghost"
+          size="small"
+          class={cx('--snippet-btn--expand')}
+          on:click={() => {
+            expanded = !expanded;
+          }}>
+          <span class={cx('--snippet-btn--text')}>{expandText}</span>
+          <ChevronDown16
+            aria-label={expandText}
+            class={cx('--icon-chevron--down', '--snippet__icon')} />
+        </Button>
+      {/if}
+    </div>
+  {/if}
 {/if}