Adding loading spinners to projects, files, clips, and preview media (image and video)

src/components/Clips.vue

 <template>
   <div class="row mb-3 gx-2 p-2 scrolling-container">
     <h3 v-if="thumbnailedClips.length > 0">Clips <button type="button" class="btn btn-danger export-btn">Export {{clips.length}} Clips</button></h3>
-    <div class="col-12">
 
+    <!-- Loading spinner -->
+    <div v-if="show_spinner" class="md-5 p-4 text-center">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+
+    <div class="col-12">
       <div class="row gy-2 gx-2 mb-2" v-for="(clip, index) in thumbnailedClips" :key="clip.id">
         <div class="col-12 text-center img-parent">
 
@@ -38,7 +45,9 @@ export default {
   name: "Clips.vue",
   props: ['project'],
   data() {
-    return {}
+    return {
+      show_spinner: false
+    }
   },
   methods: {
     deleteClipBtn(clip_id) {
@@ -123,8 +132,10 @@ export default {
     }
   },
   async mounted() {
+    this.show_spinner = true
     this.setClips([])
     await this.loadClips(this.project.id)
+    this.show_spinner = false
   },
   unmounted() {
     this.setClips([])

src/components/Files.vue

@@ -7,6 +7,14 @@
         <label for="floatingInput">Search</label>
       </div>
     </div>
+
+    <!-- Loading spinner -->
+    <div v-if="show_spinner" class="md-5 p-4 text-center">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+
     <div v-for="file in searchedFiles" :key="file.id" class="col-sm-12 col-lg-4" style="position: relative;">
 
       <div class="btn-group dropstart context-menu">
@@ -43,7 +51,8 @@ export default {
   props: ['project'],
   data() {
     return {
-      search: ""
+      search: "",
+      show_spinner: false
     }
   },
   methods: {
@@ -105,9 +114,11 @@ export default {
     },
     ...mapState(['files', 'preview', 'uploads'])
   },
-  mounted() {
+  async mounted() {
+    this.show_spinner = true
     this.setFiles([])
-    this.loadFiles(this.project.id)
+    await this.loadFiles(this.project.id)
+    this.show_spinner = false
   },
   unmounted() {
     this.setFiles([])

src/components/Preview.vue

@@ -6,11 +6,19 @@
   </div>
 
   <div class="row">
+
+    <!-- Loading spinner -->
+    <div v-if="show_spinner" class="md-5 p-5 text-center spinner-container">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+
     <div class="col-sm-12">
-      <video ref="video" v-if="!isImage && hasPreviewFile" @loadeddata="videoLoaded" @timeupdate="videoTimeUpdate" @pause="togglePause" @play="togglePause" loop preload="" poster="" class="video-responsive">
+      <video ref="video" v-if="!isImage && hasPreviewFile" v-show="media_loaded" @loadeddata="videoLoaded" @timeupdate="videoTimeUpdate" @pause="togglePause" @play="togglePause" loop preload="" poster="" class="video-responsive">
         <source :type="previewFormat" :src="preview.file.media">
       </video>
-      <img v-if="isImage && hasPreviewFile" :src="preview.file.media" class="img-fluid img-thumbnail" />
+      <img v-if="isImage && hasPreviewFile" v-show="media_loaded" :src="preview.file.media" @load="imageLoaded" class="img-fluid img-thumbnail" />
     </div>
   </div>
 
@@ -57,7 +65,6 @@
       <p class="lead">Upload or select a video to begin!</p>
     </div>
   </div>
-
 </template>
 
 <script>
@@ -72,7 +79,9 @@ export default {
       is_paused: true,
       marker_width: 12,
       marker_width_percent: 0.0,
-      clipSizeClass: ""
+      clipSizeClass: "",
+      show_spinner: false,
+      media_loaded: false
     }
   },
   methods: {
@@ -120,10 +129,16 @@ export default {
       }
     },
     videoLoaded() {
+      this.show_spinner = false
+      this.media_loaded = true
       if (this.$refs.video && this.preview.clip) {
         this.$refs.video.currentTime = this.preview.clip.start
       }
     },
+    imageLoaded() {
+      this.show_spinner = false
+      this.media_loaded = true
+    },
     startDrag(e, marker) {
       if (e) {
         e.preventDefault()
@@ -239,6 +254,10 @@ export default {
   },
   watch: {
     'preview.file': function() {
+      if (this.preview.file) {
+        this.show_spinner = true
+        this.media_loaded = false
+      }
       if (this.$refs.video) {
         this.is_paused = true
         this.$refs.video.pause()
@@ -316,4 +335,12 @@ video {
 .img-thumbnail {
   width: 100%!important;
 }
+.spinner-border {
+  margin-top: 100px;
+  width: 4em;
+  height: 4em;
+}
+.spinner-container {
+  min-height: 300px;
+}
 </style>
\ No newline at end of file

src/components/Projects.vue

@@ -9,6 +9,13 @@
     </div>
   </div>
 
+  <!-- Loading spinner -->
+  <div v-if="show_spinner" class="md-5 p-4 text-center">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+
   <!-- Project cards -->
   <div class="row gy-3 gx-3">
     <div class="col-sm-3" v-for="project in projects" :key="project.id" >
@@ -94,7 +101,8 @@ export default {
       project_fps_num: 30,
       project_fps_den: 1,
       project_width: 1920,
-      project_height: 1080
+      project_height: 1080,
+      show_spinner: false
     }
   },
   methods: {
@@ -141,7 +149,9 @@ export default {
     ...mapState(['projects'])
   },
   async mounted() {
+    this.show_spinner = true
     await this.loadProjects()
+    this.show_spinner = false
   }
 }
 </script>
@@ -150,4 +160,8 @@ export default {
   button {
     margin-left: 5px;
   }
+  .spinner-border {
+    width: 3em!important;
+    height: 3em!important;
+  }
 </style>
\ No newline at end of file