From 7761e5b6a025ac7c0fe91ef0e11c7b0fdf4ce62f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Wed, 4 Feb 2026 14:06:06 +0100
Subject: [PATCH] Updated AlbumCard to have a placeholder

---
 app/components/Album/Card.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/components/Album/Card.vue b/app/components/Album/Card.vue
index 9738f23..790fa1a 100644
--- a/app/components/Album/Card.vue
+++ b/app/components/Album/Card.vue
@@ -12,7 +12,13 @@ const props = defineProps<AlbumProps>()
 <template>
 	<article class="card">
 		<NuxtLink :to="`/album/${props._id}`">
-			<NuxtImg :src="props.file" :alt="props.name" />
+			<NuxtImg
+				:src="props.file"
+				:alt="props.name"
+				placeholder
+				width="240"
+				height="240"
+			/>
 			<p>{{ props.name }}</p>
 		</NuxtLink>
 		<ArtistName :artists="props.artists" class="artist" />
@@ -23,12 +29,10 @@ const props = defineProps<AlbumProps>()
 @use "@/styles/util" as *;
 @use "@/styles/variables" as *;
 
-$width: 240px;
-
 .card {
 	@include fontSize(14px);
 
-	max-width: $width;
+	max-width: 240px;
 
 	display: flex;
 	flex-direction: column;
@@ -37,8 +41,6 @@ $width: 240px;
 	& > a {
 		& img {
 			border-radius: $border-radius-standard;
-
-			width: $width;
 		}
 
 		& p {