style: update details-header, song-list skeleton

Signed-off-by: rajput-hemant <[email protected]>

Author: rajput-hemant

bun.lockb

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "preview": "next build && next start",
@@ -60,7 +60,7 @@
     "jotai": "^2.10.0",
     "lucide-react": "^0.452.0",
     "next": "^15.0.0-rc.0",
-    "next-auth": "beta",
+    "next-auth": "^5.0.0-beta.22",
     "next-themes": "^0.3.0",
     "postgres": "^3.4.4",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",

package.json

@@ -27,7 +27,7 @@ export function DetailsHeaderSkeleton({ type }: DetailsHeaderSkeletonProps) {
   )[type];
 
   return (
-    <div className="mb-10 flex flex-col items-center justify-center gap-4 lg:flex-row lg:justify-start lg:gap-10">
+    <div className="pointer-events-none mb-10 flex flex-col items-center justify-center gap-4 lg:flex-row lg:justify-start lg:gap-10">
       <div
         className={cn(
           "relative aspect-square w-44 overflow-hidden rounded-md border p-1 shadow-md transition-[width_shadow] duration-500 hover:shadow-xl md:w-56 xl:w-64",
@@ -75,6 +75,13 @@ export function DetailsHeaderSkeleton({ type }: DetailsHeaderSkeletonProps) {
           >
             <Skeleton className="size-5 rounded-full" />
           </Button>
+          <Button
+            size="icon"
+            variant="outline"
+            className="rounded-full shadow-sm"
+          >
+            <Skeleton className="size-5 rounded-full" />
+          </Button>
         </div>
       </div>
     </div>

src/components/skeletons/details-header-skeleton.tsx

@@ -13,7 +13,7 @@ export function SliderCardSkeleton(props: SliderCardSkeletonProps) {
   return (
     <div
       className={cn(
-        "w-32 rounded-md sm:w-36 sm:border md:w-48 lg:w-56",
+        "pointer-events-none w-32 rounded-md sm:w-36 sm:border md:w-48 lg:w-56",
         aspect === "video" && "w-44 border-none sm:w-48 md:w-64 lg:w-72"
       )}
     >

src/components/skeletons/slider-card-skeleton.tsx

@@ -6,7 +6,7 @@ import { SliderCardSkeleton } from "./slider-card-skeleton";
 
 export function SliderListSkeleton({ length = 5 }) {
   return Array.from({ length }).map((_, i) => (
-    <div key={i} className="space-y-2">
+    <div key={i} className="pointer-events-none space-y-2">
       <Skeleton className="h-7 w-72 sm:h-8 md:h-9 lg:w-96" />
 
       <ScrollArea>

src/components/skeletons/slider-list-skeleton.tsx

@@ -9,7 +9,7 @@ type SongListSkeletonProps = {
 export function SongListSkeleton(props: SongListSkeletonProps) {
   const { length = 1, showAlbum = true } = props;
   return (
-    <div className="space-y-2 text-muted-foreground">
+    <div className="pointer-events-none space-y-2 text-muted-foreground">
       {Array.from({ length }).map((_, i) => (
         <div
           key={i}
@@ -19,12 +19,12 @@ export function SongListSkeleton(props: SongListSkeletonProps) {
             <Skeleton className="h-5 w-3" />
           </div>
 
-          <div className="flex w-[82%] items-center justify-between gap-4 xl:w-[86%] 2xl:w-[88%]">
+          <div className="flex items-center justify-between gap-4 overflow-hidden lg:w-[86%]">
             {showAlbum && <Skeleton className="size-10 shrink-0" />}
 
             <div
               className={cn(
-                "flex w-[calc(100%-2.5rem)] flex-col space-y-1.5 lg:flex-row lg:items-baseline",
+                "flex w-full flex-col lg:w-[calc(100%-0.5rem)] lg:flex-row",
                 showAlbum && "xl:w-2/3"
               )}
             >
@@ -43,7 +43,8 @@ export function SongListSkeleton(props: SongListSkeletonProps) {
             )}
           </div>
 
-          <div className="flex w-[12%] items-center justify-end lg:justify-between xl:w-[10%] 2xl:w-[8%]">
+          <div className="flex w-[12%] items-center justify-end gap-3 lg:w-[16%] lg:shrink-0 lg:justify-between xl:w-[12%] 2xl:w-[10%]">
+            <Skeleton className="hidden size-5 lg:block" />
             <Skeleton className="hidden size-5 lg:block" />
             <Skeleton className="hidden h-5 w-[38.5px] lg:block" />
             <Skeleton className="size-6 lg:size-5" />