Implementing Exercise system in database with API and frontend visualization

software/src/components/basics/cardView.vue

@@ -5,20 +5,28 @@ defineProps({
   icon: {
     type: String
   },
-  subtitle: {
-    type: String,
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 </script>
 
 <template>
-  <v-card
-    variant="tonal"
-    :prepend-icon="icon"
-    :title="title"
-    :subtitle="subtitle"
-  >
-    <v-container class="pt-0">
+  <v-card variant="tonal" >
+    <v-card-title v-if="title || loading" color="primary" class="pa-0">
+      <v-sheet color="primary" class="pl-2 py-1">
+        <v-skeleton-loader
+          type="heading"
+          :loading="loading"
+          style="background-color: transparent"
+        >
+          <v-icon :icon="icon" v-if="icon" /> &nbsp;{{ title }}
+        </v-skeleton-loader>
+      </v-sheet>
+    </v-card-title>
+
+    <v-container>
       <v-row>
         <v-col >
           <slot></slot>