chore(ui): make loader container available globally

Author: lgarciaog

stackgres-k8s/src/admin-ui/public/assets/css/style.css

@@ -192,8 +192,8 @@ td.actions a, a.paramDoc {
 }
 
 .paramUl a.paramDoc {
-    top: 1px;
-    left: 6px;
+    top: 2px;
+    left: 1px;
 }
 
 a.newTab {
@@ -810,6 +810,23 @@ form#login .warning {
     background-size: 30px;
 }
 
+.loadingContainer {
+    position: relative;
+}
+
+.loadingContainer.loading:after {
+    display: block;
+    content: " ";
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(../img/loader.gif) center no-repeat rgba(0, 0, 0, .35);
+    background-size: 30px;
+  }
+
 /* Dark mode - Log in */
 
 .darkmode #nav .right > div#signup {
@@ -4679,6 +4696,7 @@ tr.details.pgConfig .title {
 
 .paramDetails table {
     margin-bottom: 30px;
+    width: 100%;
     border: 0;
 }
 

stackgres-k8s/src/admin-ui/src/App.vue

@@ -4,6 +4,7 @@
 		<SideBar v-if="$route.params.hasOwnProperty('namespace')"></SideBar>
     <div
       id="main"
+      class="loadingContainer"
       :class="[
         !$route.params.hasOwnProperty('namespace') && 'noSidebar',
         isLoading && 'loading'
@@ -45,15 +46,8 @@
     width: 100%;
   }
 
-  #main.loading:after {
-    display: block;
-    content: " ";
-    position: absolute;
+  .loadingContainer.loading:after {
     top: 50px;
-    left: 0;
-    width: 100%;
     height: calc(100% - 50px);
-    background: url('/assets/img/loader.gif') center no-repeat rgba(0, 0, 0, .35);
-    background-size: 30px;
   }
 </style>