More skeleton loader, repair bandDetailPage

software/src/components/pageParts/concertListItem.vue

@@ -5,7 +5,6 @@ defineProps({
   image: String,
   title: String,
   description: String,
-  price: String,
   loading: Boolean
 })
 </script>
@@ -35,7 +34,7 @@ defineProps({
               size="x-large"
             />
           </div>
-          {{ price }}
+          <slot name="append-text"></slot>
         </template>
       </card-with-left-image>
     </v-col>

software/src/components/pageParts/heroImage.vue

@@ -6,52 +6,78 @@ defineProps({
   logo: String,
   title: String,
   chips: Array<String>,
-  description: String
+  description: String,
+  loading: Boolean
 })
 </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-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" style="width: 100%;">
+        <v-row>
+          <v-col cols="2">
+            <v-skeleton-loader
+              type="image"
+              :loading="loading"
+              height="200"
+              width="200"
+            >
               <v-card>
                 <v-img
                   v-if="logo"
                   :src="'http://localhost:3000/static/' + logo"
-                  height="200"
+                  width="200"
                   aspect-ratio="1"
                   cover
                 />
               </v-card>
-            </v-col>
+            </v-skeleton-loader>
+          </v-col>
 
-            <v-col cols="auto">
-              <p class="text-h3">{{ title }}</p>
+          <v-col cols="8">
+            <v-skeleton-loader
+              type="heading"
+              :loading="loading"
+              width="500"
+            >
+              <span class="text-h3">{{ title }}</span>
+            </v-skeleton-loader>
 
-              <div>
-                <v-chip
-                  v-for="chip in chips"
-                  class="mr-2 my-1"
-                  variant="flat"
-                >
-                  {{ chip }}
-                </v-chip>
-              </div>
+            <v-skeleton-loader
+              :loading="loading"
+              type="sentences"
+            >
+              <v-chip
+                v-for="chip in chips"
+                class="mr-2 my-1"
+                variant="flat"
+              >
+                {{ chip }}
+              </v-chip>
 
-              
               <p class="text-h6" v-if="!$slots.description">{{ description }}</p>
-              <slot name="description"></slot>
-            </v-col>
-          </v-row>
-          
-        </div>
-      </v-img>
+              
+              <p class="text-h6">
+                <slot name="description"></slot>
+              </p>
+            </v-skeleton-loader>
+
+          </v-col>
+        </v-row>
+        
+      </div>
+    </v-img>
   </div>
-</template>
+</template>
+
+<style scoped>
+.v-skeleton-loader {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+</style>