fix and update

apps/frontend/components/ui/media-image-skeleton.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function MediaImageSkeleton({
+  className,
+  rounded = 'xl'
+}: {
+  className?: string;
+  rounded?: 'xl' | '2xl' | 'none' | 'full';
+}) {
+  const roundedClass =
+    rounded === '2xl' ? 'rounded-2xl' : rounded === 'full' ? 'rounded-full' : rounded === 'none' ? 'rounded-none' : 'rounded-xl';
+
+  return (
+    <Skeleton
+      className={cn('relative min-h-[120px] w-full overflow-hidden', roundedClass, className)}
+      aria-hidden
+    />
+  );
+}

apps/frontend/components/ui/skeleton.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+export function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-gradient-to-r from-[#e8ebf0] via-[#f4f6f9] to-[#e8ebf0] bg-[length:200%_100%]', className)}
+      {...props}
+    />
+  );
+}