move cover over loading

src/components/Layout.js

@@ -308,6 +308,11 @@ class Dashboard extends React.Component {
             }
           />
         ) : null}
+        <LoadingOverlay
+          isLoading={app.loading || app.flags.isFetchingDomain}
+          ui={app.flags.isFetchingDomain}
+          language={app.language}
+        />
         {features.USE_COVER && (
           <StaticPage showing={app.flags.isCover}>
             {/* enable USE_COVER in config.js features, and customise your header */}
@@ -315,11 +320,6 @@ class Dashboard extends React.Component {
             <TemplateCover showing={app.flags.isCover} showAppHandler={actions.toggleCover} />
           </StaticPage>
         )}
-        <LoadingOverlay
-          isLoading={app.loading || app.flags.isFetchingDomain}
-          ui={app.flags.isFetchingDomain}
-          language={app.language}
-        />
       </div>
     )
   }

src/scss/_variables.scss

@@ -34,7 +34,7 @@ $xxxlarge: 32px;
 
 // z-index levels
 $final-level: 10000;
-$loading-overlay: 1000;
+$loading-overlay: 500;
 $overheader: 100;
 $header: 10;
 $map-overlay: 2;

src/scss/cover.scss

@@ -7,7 +7,7 @@
   width: 100%;
   opacity: 1;
   transition: top 0.4s ease;
-  z-index: $overheader + 1;
+  z-index: $loading-overlay + 1;
   overflow-y: auto;
   overflow-x: hidden;
   color: $offwhite;