Add Loading component and use across views

Introduce a reusable Loading component (src/components/ui/loading.tsx) that shows a spinning Loader2 icon and an optional message. Replace ad-hoc loading UIs by importing and using Loading in BrowseView and CastView. In App.tsx, add mediaLoading state (set around fetchAllMedia) and pass it to BrowseView; also add local loading states to MediaDetailRoute and CastDetailRoute to show Loading while fetching details. These changes centralize loading UX and remove duplicated spinner markup.

src/components/BrowseView.tsx

@@ -3,6 +3,7 @@ import MediaCard from './MediaCard';
 import MediaListItem from './MediaListItem';
 import { LayoutGrid, List, Star, ChevronLeft, ChevronRight, ArrowUpDown, Search, Monitor, Users, FolderTree, Tag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import Loading from '@/components/ui/loading';
 import React, { useState, useMemo, useEffect } from 'react';
 import { 
   DropdownMenu, 
@@ -20,9 +21,10 @@ interface BrowseViewProps {
   itemsPerPage?: number;
   gridItemSize?: number;
   onGridItemSizeChange?: (size: number) => void;
+  loading?: boolean;
 }
 
-export default function BrowseView({ mediaList, onMediaClick, activeCategory, itemsPerPage: initialItemsPerPage = 12, gridItemSize: initialGridItemSize = 5, onGridItemSizeChange }: BrowseViewProps) {
+export default function BrowseView({ mediaList, onMediaClick, activeCategory, itemsPerPage: initialItemsPerPage = 12, gridItemSize: initialGridItemSize = 5, onGridItemSizeChange, loading = false }: BrowseViewProps) {
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(initialItemsPerPage);
@@ -309,7 +311,9 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
       </div>
 
       {/* Content */}
-      {mediaList.length === 0 ? (
+      {loading ? (
+        <Loading message="Loading media..." />
+      ) : mediaList.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
             <Search size={32} />

src/components/CastView.tsx

@@ -5,6 +5,7 @@ import { Search, ArrowUpDown, User, ChevronLeft, ChevronRight, X, Filter } from
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import Loading from '@/components/ui/loading';
 import { motion, AnimatePresence } from 'motion/react';
 import { cn } from '@/lib/utils';
 import { fetchAllCast } from '@/api';
@@ -319,10 +320,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
       )}
 
       {loading ? (
-        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#6d28d9] mb-4" />
-          <p className="text-lg font-bold">Loading cast...</p>
-        </div>
+        <Loading message="Loading cast..." />
       ) : filteredStaff.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <User size={48} className="mb-4 opacity-20" />

src/components/ui/loading.tsx

@@ -0,0 +1,14 @@
+import { Loader2 } from 'lucide-react';
+
+interface LoadingProps {
+  message?: string;
+}
+
+export default function Loading({ message = 'Loading...' }: LoadingProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+      <Loader2 className="animate-spin h-12 w-12 text-[#6d28d9] mb-4" />
+      <p className="text-lg font-bold">{message}</p>
+    </div>
+  );
+}