card skeleton loader improvement

TandoorRecipes · Mar 18, 2024 · 83e9a2b · 83e9a2b
1 parent 46d2b77
commit 83e9a2b
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
@@ -40,7 +40,14 @@
         </v-card>
     </template>
     <template v-else>
-        <v-skeleton-loader :elevation="3" type="image, heading, subtitle" v-if="loading" ></v-skeleton-loader>
+        <v-card :style="{'height': height}">
+            <v-img  src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
+            <v-card-title><v-skeleton-loader type="heading"></v-skeleton-loader></v-card-title>
+            <v-card-text>
+                <v-skeleton-loader type="subtitle"></v-skeleton-loader>
+            </v-card-text>
+        </v-card>
+
     </template>
 
 </template>