New section on homepage: popular genres

src/components/basics/cardViewOneLine.vue

@@ -3,17 +3,33 @@ defineProps({
   /** Displayed smaller text on the left side */
   descriptionText: {
     type: String,
-    default: ""
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
   },
 
   /** Displayed bigger text on the right side */
-  valueText: [ String, Number ]
-})
+  valueText: [String, Number],
+});
 </script>
 
 <template>
   <v-card variant="outlined" class="my-1 px-2">
-    <v-row class="d-flex justify-center align-center">
+    <v-row v-if="loading">
+      <v-col>
+        <v-skeleton-loader
+          type="heading"
+          :loading="loading"
+          style="background-color: transparent"
+        >
+        sdasd
+        </v-skeleton-loader>
+      </v-col>
+    </v-row>
+
+    <v-row class="d-flex justify-center align-center" v-else>
       <v-col class="text-caption text-left" v-if="descriptionText.length > 0">
         {{ descriptionText }}
       </v-col>
@@ -23,4 +39,4 @@ defineProps({
       </v-col>
     </v-row>
   </v-card>
-</template>
+</template>