From 045d118b3f6a52d0ebcb344f555454abc3ee2472 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Fri, 13 Dec 2024 22:59:14 +0100
Subject: [PATCH] feat: Add skeleton loading state for recipe details page

feat: Add detailed skeleton loading state matching recipe layout
---
 pages/[id].vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pages/[id].vue b/pages/[id].vue
index 51aa8a9..f3a0fcd 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -40,7 +40,11 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="status !== 'success'">Loading</div>
+  <div v-if="status !== 'success'" class="container mx-auto px-4 lg:px-8">
+    <span
+      class="loading loading-bars loading-lg flex justify-center items-center min-h-screen mx-auto"
+    />
+  </div>
   <section v-else>
     <Recipe :recipe="recipe!" />
   </section>