Changed window loader layout to be non-blocking.

Closes #1172
altair-graphql · Mar 30, 2020 · 443e4f2 · 443e4f2
1 parent 841577f
commit 443e4f2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/altair-app/src/scss/_layout.scss b/packages/altair-app/src/scss/_layout.scss
@@ -6,16 +6,19 @@
   background: var(--theme-bg-color);
   cursor: default;
 }
+
 .main-container-inner {
   flex: 1 1 auto;
   min-height: 1px;
   display: flex;
 }
+
 .content-container {
   position: relative;
 }
 
 .app-window__content {
+  position: relative;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -30,11 +33,13 @@
   flex: 1;
   overflow: hidden;
 }
+
 .main-content-row {
   display: flex;
   height: 100%;
   flex-wrap: nowrap;
 }
+
 app-window {
   // width: 100%;
   // height: 100%;
@@ -56,4 +61,4 @@ app-doc-viewer {
   @include main-content-col;
   padding: 0;
   padding-left: 0.5rem;
-}
+}
diff --git a/packages/altair-app/src/scss/components/_loader.scss b/packages/altair-app/src/scss/components/_loader.scss
@@ -5,11 +5,13 @@
   font-weight: 500;
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(var(--rgb-theme-bg), .3);
+  left: 50%;
+  background: rgba(var(--rgb-theme-bg), .8);
   z-index: 50;
+  padding: 10px;
+  transform: translateX(-50%);
+  min-width: 200px;
+  border-radius: 0 0 4px 4px;
 
   .loader-img {
     vertical-align: middle;