feat: enhance loading component with SVG spinner and update skeleton sizes in MusicPage

app/components/loading.tsx

@@ -4,14 +4,31 @@ import React from 'react';
 
 const Loading: React.FC = () => {
   return (
-    <>
+    <div className="flex items-center justify-center min-h-screen">
-        <div className="flex items-center justify-center min-h-screen">
+      <div className="flex flex-col items-center">
-          <div className="text-center">
+        <svg
-            <div className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
+          className="animate-spin h-12 w-12 text-primary/50 mb-4"
-            <p>Loading...</p>
+          xmlns="http://www.w3.org/2000/svg"
-          </div>
+          fill="none"
-        </div>
+          viewBox="0 0 24 24"
-    </>
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+          />
+        </svg>
+        <p className="text-white text-lg font-medium">Loading...</p>
+      </div>
+    </div>
   );
 };
 

app/page.tsx

@@ -88,7 +88,7 @@ export default function MusicPage() {
                 {isLoading ? (
                   // Loading skeletons
                   Array.from({ length: 6 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[220px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
                   ))
                 ) : (
                   recentAlbums.map((album) => (
@@ -121,7 +121,7 @@ export default function MusicPage() {
             {isLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[200px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
                   ))
                 ) : (
                   newestAlbums.map((album) => (

next.config.mjs

@@ -7,7 +7,7 @@ const nextConfig = {
         hostname: "**",
       }
     ],
-    qualities: [ 75, 85, 90, 100 ]
+    qualities: [ 45, 75, 85, 90, 100 ]
   },
   async headers() {
     return [