start page taking shape

vue3/src/components/display/HorizontalRecipeScroller.vue

@@ -1,7 +1,7 @@
 <template>
     <v-row justify="space-between">
         <v-col>
-            <h2>{{ title }}</h2>
+            <h2><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i>  {{ title }}</h2>
         </v-col>
     </v-row>
 
@@ -18,6 +18,19 @@
             </v-window>
         </v-col>
     </v-row>
+    <v-row v-if="recipeWindows.length == 0 && skeletons > 0">
+        <v-col>
+            <v-window >
+                <v-window-item>
+                    <v-row>
+                        <v-col v-for="n in skeletons">
+                            <v-skeleton-loader :elevation="3" type="card"></v-skeleton-loader>
+                        </v-col>
+                    </v-row>
+                </v-window-item>
+            </v-window>
+        </v-col>
+    </v-row>
 
 </template>
 
@@ -32,7 +45,9 @@ const {mdAndUp} = useDisplay()
 
 const props = defineProps(
     {
-        title: {type: String, required: true},
+        title: {type: String as PropType<undefined|String>, required: true},
+        icon: {type: String, required: false},
+        skeletons: {type: Number, default: 0},
         recipes: {
             type: Array as PropType<Recipe[] | RecipeOverview[]>,
             required: true

vue3/src/components/display/RecipeCard.vue

@@ -1,11 +1,13 @@
 <template>
     <v-card :to="`/recipe/${recipe.id}`">
 
-        <v-img
+        <v-img v-if="recipe.image != null"
             cover
             height="50%"
             :src="recipe.image"
         ></v-img>
+        <v-img v-else src="../../assets/recipe_no_image.svg" cover
+            height="50%"></v-img>
 
         <v-card-item>
             <v-card-title>{{ recipe.name }}</v-card-title>
@@ -38,15 +40,15 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, PropType} from 'vue'
 import KeywordsComponent from "@/components/display/KeywordsBar.vue";
-import {Recipe} from "@/openapi";
+import {Recipe, RecipeOverview} from "@/openapi";
 
 export default defineComponent({
     name: "RecipeCard",
     components: {KeywordsComponent},
     props: {
-        recipe: {} as Recipe,
+        recipe: {type: {} as PropType<Recipe|RecipeOverview>, required: true,},
         show_keywords: {type: Boolean, required: false},
         show_description: {type: Boolean, required: false},
     }