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="text-center">
-            <div className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
-            <p>Loading...</p>
-          </div>
-        </div>
-    </>
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex flex-col items-center">
+        <svg
+          className="animate-spin h-12 w-12 text-primary/50 mb-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          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>
   );
 };