Add loader overlay

Signed-off-by: Olivier Vernin <olivier.vernin@suse.com>
updatecli · Jul 25, 2023 · 64c1656 · 64c1656
1 parent e666b1b
commit 64c1656
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/src/components/pipeline/report.vue b/src/components/pipeline/report.vue
@@ -2,6 +2,21 @@
   <v-container
     v-if="pipeline"
   >
+      <v-overlay
+      :model-value="isLoading"
+      class="align-center justify-center"
+      disabled="True"
+      eager="True"
+      no-click-animation="True"
+      persistent="True"
+    >
+      <v-progress-circular
+        color="primary"
+        indeterminate
+        size="64"
+      ></v-progress-circular>
+    </v-overlay>
+
     <v-row>
       <v-col
         class="text-right"
@@ -126,14 +141,19 @@
           variant="outlined"
           v-if="isTargets()"
         >
-          <v-card-title><h4>Target</h4></v-card-title>
+          <v-card-title>
+            <h4>Target</h4>
+          </v-card-title>
           <v-card-text>
               <v-card
                 variant="flat"
                 v-for="(value, key) in pipeline.Pipeline.Targets" :key="key"
               >
                 <v-card-title>
-                  <v-icon icon="mdi-circle" :color="getStatusColor(value.Result)"></v-icon>  {{ value.Name }}</v-card-title>
+                  <v-row>
+                    <v-icon icon="mdi-circle" :color="getStatusColor(value.Result)"></v-icon>  {{ value.Name }}
+                  </v-row>
+                </v-card-title>
                 <v-card-text>
                   <p
                     v-if="value.Scm.URL"
@@ -237,6 +257,7 @@ export default {
   name: 'PipelineReportView',
 
   data: () => ({
+    isLoading: true,
     pipeline: {
       "Pipeline": {}
     },
@@ -323,6 +344,7 @@ export default {
       const data = await response.json();
 
       this.pipeline = data.data;
+      this.isLoading = false;
 
       if (this.pipeline !== null) {
         this.latestReportByID = data.latestReportByID
@@ -331,6 +353,14 @@ export default {
     },
   },
 
+  watch: {
+      isLoading (val) {
+        val && setTimeout(() => {
+          this.isLoading = false
+        }, 3000)
+      },
+  },
+
   async created() {
     /*
       One thing to note when using routes with params is that

diff --git a/src/components/pipeline/reports.vue b/src/components/pipeline/reports.vue
@@ -3,6 +3,21 @@
       class="py-8 px-6"
       fluid
   >
+    <v-overlay
+      :model-value="isLoading"
+      class="align-center justify-center"
+      disabled="True"
+      eager="True"
+      no-click-animation="True"
+      persistent="True"
+    >
+      <v-progress-circular
+        color="primary"
+        indeterminate
+        size="64"
+      ></v-progress-circular>
+    </v-overlay>
+
     <!-- Show Project Description -->
     <v-container>
       <!--
@@ -56,6 +71,7 @@ export default {
   },
 
   data: () => ({
+    isLoading: true,
     pipelines: [],
     itemsPerPage: 10,
     headers: [
@@ -85,6 +101,7 @@ export default {
         }
       });
       const data = await response.json();
+      this.isLoading = false
       this.pipelines = data.data
     },
     getPipelineLink: function(id){
@@ -119,6 +136,14 @@ export default {
     },
   },
 
+  watch: {
+      isLoading (val) {
+        val && setTimeout(() => {
+          this.isLoading = false
+        }, 3000)
+      },
+  },
+
   async created() {
     try {
       this.getReportsData()