From 7345cc1b839576ac827fbd7c9efa5903b9ad4842 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:27:27 -0700
Subject: [PATCH] docs(preview): move inline loader above preview

---
 docs/src/components/Preview.svelte | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index acbef287..c412b82d 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -107,11 +107,12 @@
   }
 
   .preview-viewer.framed {
-    min-height: 22rem;
+    min-height: 20rem;
   }
 
   .framed-header {
     display: flex;
+    align-items: center;
   }
 
   iframe {
@@ -121,23 +122,16 @@
     width: 100%;
     height: 100%;
   }
-
-  .loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 </style>
 
 <div class="preview">
   {#if framed}
     <div class="framed-header">
-      <div></div>
+      <div style="margin-left: var(--cds-spacing-03)">
+        {#if framed && !success}
+          <InlineLoading description="Loading..." />
+        {/if}
+      </div>
       <Button
         style="margin-left: auto;"
         kind="ghost"
@@ -151,11 +145,6 @@
     </div>
   {/if}
   <div class="preview-viewer" class:framed>
-    {#if framed && !success}
-      <div class="loader">
-        <InlineLoading />
-      </div>
-    {/if}
     {#if framed}
       <iframe
         on:load="{() => {