[desk-tool] Centering editor spinners (#661)

sanity-io · Mar 14, 2018 · c10d3cf · c10d3cf
1 parent ed99ec2
commit c10d3cf
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/@sanity/desk-tool/src/pane/Editor.js b/packages/@sanity/desk-tool/src/pane/Editor.js
@@ -610,9 +610,13 @@ export default withRouterHOC(
           isSelected // last pane is always selected for now
         >
           <div className={styles.root}>
-            {isCreatingDraft && <Spinner fullscreen message="Making changes…" />}
-            {isPublishing && <Spinner fullscreen message="Publishing…" />}
-            {isUnpublishing && <Spinner fullscreen message="Unpublishing…" />}
+            {(isCreatingDraft || isPublishing || isUnpublishing) && (
+              <div className={styles.spinnerContainer}>
+                {isCreatingDraft && <Spinner center message="Making changes…" />}
+                {isPublishing && <Spinner center message="Publishing…" />}
+                {isUnpublishing && <Spinner center message="Unpublishing…" />}
+              </div>
+            )}
             <div className={styles.top}>
               <div className={styles.editedDate}>
                 {value && (

diff --git a/packages/@sanity/desk-tool/src/pane/styles/Editor.css b/packages/@sanity/desk-tool/src/pane/styles/Editor.css
@@ -13,6 +13,7 @@
 .root {
   display: block;
   background-color: var(--body-bg);
+  position: relative; /* Needed to keep the spinners in place */
 
   @media (--screen-medium) {
     background-color: transparent;
@@ -129,6 +130,20 @@
   }
 }
 
+.spinnerContainer {
+  composes: frosted from "part:@sanity/base/theme/layout/backgrounds-style";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
+  height: 100vh;
+
+  @media (--screen-medium) {
+    height: calc(100vh - 6rem); /* 6rem is aprox the height of the header stuff */
+  }
+}
+
 .validationButton {
   border: 5px solid red;
 }