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/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" />