add loader for tracks

Author: aggarwalpulkit596

.DS_Store

@@ -70,11 +70,9 @@
   <div class="h-100 all-center" v-else>
     <div>
       <img
-        src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/select-track-removebg-preview.png"
+        src="https://minio.codingblocks.com/amoeba/online-loader.gif"
+        alt="loading..."
       />
-      <div class="heading-5 t-align-c bold text-gradient-orange mt-10">
-        PLEASE SELECT A TRACK TO GET GOING!
-      </div>
     </div>
   </div>
 </template>
@@ -83,23 +81,36 @@
 import RatingsComponent from '@/components/misc/RatingsComponent.vue'
 
 export default {
-  props: ['id'],
+  props: {
+    id: {
+      type: String,
+      default: 1,
+    },
+  },
   components: {
     RatingsComponent,
   },
   data() {
     return {
       track: null,
       courses: [],
+      loading: false,
     }
   },
   watch: {
-    id: async function (val) {
-      let response = await this.$repositories.courses.fetchTrackById(val ?? 1)
-      this.track = response
-
-      response = await this.$repositories.courses.fetchCourseForTrack(val ?? 1)
-      this.courses = response
+    id: {
+      async handler(newVal, oldVal) {
+        this.loading = true
+        this.track = null
+        let [track, courses] = await Promise.all([
+          this.$repositories.courses.fetchTrackById(newVal?? 1),
+          this.$repositories.courses.fetchCourseForTrack(newVal?? 1),
+        ])
+        this.track = track
+        this.courses = courses
+        this.loading = false
+      },
+      immediate: true,
     },
   },
 }

components/courses/TracksListComponent.vue

@@ -68,7 +68,7 @@
               </div>
               <div v-else class="position-relative tooltip-container">
                 <button class="button-primary" @click="handleRegister">
-                  Register using Oneauth
+                  Register
                   <img
                     src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/button-icon.svg"
                     class="ml-2"