Improve details page loading and tv series details

src/components/TVSeriesDetails.vue

@@ -56,14 +56,30 @@ const alreadyAdded = computed(() =>
 
       <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
         <div class="card-body">
-          <p class="font-semibold text-gray-900">
-            Seasons:
-            <span class="text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
-          </p>
-          <p class="font-semibold text-gray-900">
-            Expisodes:
-            <span class="text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
-          </p>
+          <div class="inline-flex items-center gap-2">
+            <span class="flex items-center font-semibold text-gray-900">
+              Seasons:
+              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
+            </span>
+
+            <!-- SVG star separator -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4 text-yellow-500 shrink-0"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.967a1 1 0 00.95.69h4.178c.969 0 1.371 1.24.588 1.81l-3.385 2.46a1 1 0 00-.364 1.118l1.287 3.966c.3.922-.755 1.688-1.54 1.118l-3.385-2.46a1 1 0 00-1.176 0l-3.385 2.46c-.785.57-1.84-.196-1.54-1.118l1.287-3.966a1 1 0 00-.364-1.118L2.045 9.394c-.783-.57-.38-1.81.588-1.81h4.178a1 1 0 00.95-.69l1.286-3.967z"
+              />
+            </svg>
+
+            <span class="flex items-center font-semibold text-gray-900">
+              Episodes:
+              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
+            </span>
+          </div>
 
           <p class="font-semibold text-gray-900">
             Last Episode:

src/lib/api.ts

@@ -12,7 +12,7 @@ const instance = axios.create({
   baseURL: 'https://6909aa3d0001d5d30ff1.fra.appwrite.run/3',
   timeout: 6969,
   headers: {
-    'Content-Type': 'application/json'
+    'Content-Type': 'application/json',
   },
 })
 

src/views/DetailsView.vue

@@ -60,7 +60,7 @@ onMounted(async () => {
     <!-- Loading -->
     <!-- Loading -->
     <div v-else-if="isLoading" class="flex justify-center items-center min-h-screen">
-      <span class="loading loading-ring loading-lg text-primary"></span>
+      <span class="loading loading-ring loading-xl text-primary"></span>
     </div>
 
     <!-- Details -->