feat(code-snippet): add skeleton state

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,19 +20,27 @@
   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'}
+{#if skeleton}
+  <CodeSnippetSkeleton class={className} {type} {style} />
+{/if}
+
+{#if !skeleton}
+  {#if type === 'inline'}
     <Copy
       aria-label={$$props['aria-label'] || copyLabel}
       aria-describedby={id}
@@ -47,7 +56,7 @@
         <slot>{code}</slot>
       </code>
     </Copy>
-{:else}
+  {:else}
     <div
       on:mouseover
       on:mouseenter
@@ -86,4 +95,5 @@
         </Button>
       {/if}
     </div>
+  {/if}
 {/if}