Skeleton loader

software/src/components/cardWithLeftImage.vue

@@ -5,7 +5,8 @@ defineProps({
   link: {
     type: Boolean,
     default: true
-  }
+  },
+  loading: Boolean
 })
 </script>
 
@@ -16,21 +17,37 @@ defineProps({
   >
     <v-row>
       <v-col cols="auto" class="pr-0">
-        <v-img 
-          :src="image" 
-          aspect-ratio="1" 
-          width="140" 
-          cover 
-        />
+        <v-skeleton-loader
+          type="image"
+          :loading="loading"
+          width="140"
+        >
+          <v-img 
+            :src="image" 
+            aspect-ratio="1" 
+            width="140" 
+            cover 
+          />
+        </v-skeleton-loader>
       </v-col>
 
       <v-col class="pl-0" cols="7">
-        <v-card-title v-if="title">
-          {{ title }}
-        </v-card-title>
+        <v-skeleton-loader
+          :loading="loading"
+          type="heading"
+        >
+          <v-card-title v-if="title">
+            {{ title }}
+          </v-card-title>
+        </v-skeleton-loader>
 
         <div class="px-4 pb-4" v-if="$slots.default">
-          <slot></slot>
+          <v-skeleton-loader
+            :loading="loading"
+            type="sentences"
+          >
+            <slot></slot>
+          </v-skeleton-loader>
         </div>
       </v-col>
 

software/src/components/cardWithTopImage.vue

@@ -13,7 +13,8 @@ defineProps({
   link: {
     type: Boolean,
     default: true
-  }
+  },
+  loading: Boolean
 })
 </script>
 
@@ -22,34 +23,51 @@ defineProps({
     variant="tonal"
     :link="link"
   >
-    <v-img
-      :src="'http://localhost:3000/static/' + image"
-      aspect-ratio="1"
-      cover
+    <v-skeleton-loader
+      :loading="loading"
+      type="image"
+      height="200"
     >
-      <template #error>
-        <v-img
-          :src="'http://localhost:3000/static/' + errorImage"
-          aspect-ratio="1"
-          style="background-color: aliceblue;"
-        />
-      </template>
-    </v-img>
+      <v-img
+        :src="'http://localhost:3000/static/' + image"
+        aspect-ratio="1"
+        max-height="200"
+        cover
+      >
+        <template #error>
+          <v-img
+            :src="'http://localhost:3000/static/' + errorImage"
+            aspect-ratio="1"
+            style="background-color: aliceblue;"
+          />
+        </template>
+      </v-img>
+      
+      </v-skeleton-loader>
 
-    <div v-if="title">
-      <v-card-title v-if="!smallerTitle">
-        {{ title }}
-      </v-card-title>
+    <v-skeleton-loader
+      :loading="loading"
+      type="heading"
+    >
+      <div v-if="title">
+        <v-card-title v-if="!smallerTitle">
+          {{ title }}
+        </v-card-title>
 
-      <v-card-title v-else style="font-size: medium">
-        {{ title }}
-      </v-card-title>
-    </div>
+        <v-card-title v-else style="font-size: medium">
+          {{ title }}
+        </v-card-title>
+      </div>
+    </v-skeleton-loader>
 
-
-    <div class="px-4 pb-4" v-if="$slots.default">
-      <slot></slot>
-    </div>
+    <v-skeleton-loader
+      type="sentences"
+      :loading="loading"
+    >
+      <div class="px-4 pb-4" v-if="$slots.default">
+        <slot></slot>
+      </div>
+    </v-skeleton-loader>
 
     <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
       <v-spacer />

software/src/components/pageParts/concertListItem.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import cardWithLeftImage from '../cardWithLeftImage.vue';
+
+defineProps({
+  image: String,
+  title: String,
+  description: String,
+  price: String,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <v-row v-if="!loading">
+    <v-col>
+      <card-with-left-image
+        :title="title"
+        :image="'http://localhost:3000/static/tours/' + image"
+      >
+        <div class="text-body-1 font-weight-bold">
+          <div v-if="!$slots.description">
+            {{ description }}
+          </div>
+
+          <div v-else>
+            <slot name="description" />
+          </div>
+        </div>
+
+        <template #append>
+          <div>
+            <v-icon
+              icon="mdi-ticket"
+              color="secondary"
+              size="x-large"
+            />
+          </div>
+          {{ price }}
+        </template>
+      </card-with-left-image>
+    </v-col>
+  </v-row>
+
+  <v-row v-else>
+    <v-col>
+      <card-with-left-image :loading="loading">
+        <v-skeleton-loader
+          type="text" />
+      </card-with-left-image>
+    </v-col>
+  </v-row>
+</template>

software/src/components/pageParts/heroImage.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+defineProps({
+  image: String,
+  logo: String,
+  title: String,
+  chips: Array<String>,
+  description: String
+})
+</script>
+
+<template>
+  <div class="position-relative top-0 left-0">
+      <v-img
+        :src="'http://localhost:3000/static/' + image"
+        height="600"
+        gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
+        cover
+      >
+        <div class="position-absolute bottom-0 pa-5">
+          <v-row>
+            <v-col cols="2">
+              <v-card>
+                <v-img
+                  v-if="logo"
+                  :src="'http://localhost:3000/static/' + logo"
+                  height="200"
+                  aspect-ratio="1"
+                  cover
+                />
+              </v-card>
+            </v-col>
+
+            <v-col cols="auto">
+              <p class="text-h3">{{ title }}</p>
+
+              <div>
+                <v-chip
+                  v-for="chip in chips"
+                  class="mr-2 my-1"
+                  variant="flat"
+                >
+                  {{ chip }}
+                </v-chip>
+              </div>
+
+              
+              <p class="text-h6" v-if="!$slots.description">{{ description }}</p>
+              <slot name="description"></slot>
+            </v-col>
+          </v-row>
+          
+        </div>
+      </v-img>
+  </div>
+</template>

software/src/components/sectionDivider.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 defineProps({
   title: String,
-  image: String
+  image: String,
+  loading: Boolean
 })
 </script>
 
@@ -37,7 +38,13 @@ defineProps({
     </v-col>
     
     <v-col class="v-col-auto">
-      <span class="text-h4">{{ title }}</span>
+      <v-skeleton-loader
+        type="heading"
+        :loading="loading"
+        width="300"
+      >
+        <span class="text-h4">{{ title }}</span>
+      </v-skeleton-loader>
     </v-col>
 
     <v-col class="d-flex justify-center align-center">