feat: enhance loading states and skeleton UI for various components in settings and chat snapshots

surfsense_web/components/settings/general-settings-manager.tsx

@@ -108,7 +108,7 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 
 	return (
 		<div className="space-y-4 md:space-y-6">
-			<Alert className="py-3 md:py-4">
+			<Alert className="bg-muted/50 py-3 md:py-4">
 				<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 				<AlertDescription className="text-xs md:text-sm">
 					Update your search space name and description. These details help identify and organize

surfsense_web/components/settings/image-model-manager.tsx

@@ -5,7 +5,6 @@ import {
 	AlertCircle,
 	Check,
 	ChevronsUpDown,
-	Clock,
 	Edit3,
 	ImageIcon,
 	Key,
@@ -14,10 +13,10 @@ import {
 	Shuffle,
 	Info,
 	Trash2,
-	User,
 	Wand2,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import Image from "next/image";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { membersAtom } from "@/atoms/members/members-query.atoms";
@@ -72,6 +71,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import {
@@ -95,6 +95,14 @@ const item = {
 	show: { opacity: 1, y: 0 },
 };
 
+function getInitials(name: string): string {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
 export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 	// Image gen config atoms
 	const {
@@ -127,12 +135,13 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 	// Members for user resolution
 	const { data: members } = useAtomValue(membersAtom);
 	const memberMap = useMemo(() => {
-		const map = new Map<string, { name: string; email?: string }>();
+		const map = new Map<string, { name: string; email?: string; avatarUrl?: string }>();
 		if (members) {
 			for (const m of members) {
 				map.set(m.user_id, {
 					name: m.user_display_name || m.user_email || "Unknown",
 					email: m.user_email || undefined,
+					avatarUrl: m.user_avatar_url || undefined,
 				});
 			}
 		}
@@ -459,13 +468,61 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 				</motion.div>
 			)}
 
-			{/* Loading */}
+			{/* Loading Skeleton */}
 			{isLoading && (
-				<Card>
-					<CardContent className="flex items-center justify-center py-10">
-						<Spinner size="md" className="text-muted-foreground" />
-					</CardContent>
-				</Card>
+				<div className="space-y-4 md:space-y-6">
+					{/* Active Preference Skeleton */}
+					<Card className="border-l-4 border-l-teal-500/30">
+						<CardHeader className="pb-2 px-3 md:px-6 pt-3 md:pt-6">
+							<div className="flex items-center gap-2 md:gap-3">
+								<Skeleton className="h-9 w-9 md:h-11 md:w-11 rounded-lg" />
+								<div className="space-y-2 flex-1">
+									<Skeleton className="h-5 md:h-6 w-36 md:w-44" />
+									<Skeleton className="h-3 md:h-4 w-56 md:w-72" />
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent className="px-3 md:px-6 pb-3 md:pb-6">
+							<Skeleton className="h-9 md:h-10 w-full rounded-md" />
+						</CardContent>
+					</Card>
+
+					{/* Your Image Models Section Skeleton */}
+					<div className="space-y-4">
+						<div className="flex items-center justify-between">
+							<Skeleton className="h-6 md:h-7 w-40 md:w-48" />
+							<Skeleton className="h-8 md:h-9 w-32 md:w-36 rounded-md" />
+						</div>
+
+						{/* Cards Grid Skeleton */}
+						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+							{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+								<Card key={key} className="border-border/60">
+									<CardContent className="p-4 flex flex-col gap-3">
+										{/* Header */}
+										<div className="flex items-start justify-between gap-2">
+											<div className="space-y-1.5 flex-1 min-w-0">
+												<Skeleton className="h-4 w-28 md:w-32" />
+												<Skeleton className="h-3 w-40 md:w-48" />
+											</div>
+										</div>
+										{/* Provider + Model */}
+										<div className="flex items-center gap-2">
+											<Skeleton className="h-5 w-16 rounded-full" />
+											<Skeleton className="h-5 w-24 rounded-md" />
+										</div>
+										{/* Footer */}
+										<div className="flex items-center gap-2 pt-2 border-t border-border/40">
+											<Skeleton className="h-3 w-20" />
+											<Skeleton className="h-4 w-4 rounded-full" />
+											<Skeleton className="h-3 w-16" />
+										</div>
+									</CardContent>
+								</Card>
+							))}
+						</div>
+					</div>
+				</div>
 			)}
 
 			{/* User Configs */}
@@ -477,7 +534,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 							onClick={openNewDialog}
 							className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
 						>
-							<Plus className="h-3 w-3 md:h-4 md:w-4" />
 							Add Image Model
 						</Button>
 					</div>
@@ -492,105 +548,143 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 								<p className="text-xs md:text-sm text-muted-foreground max-w-sm mb-4">
 									Add your own image generation model (DALL-E 3, GPT Image 1, etc.)
 								</p>
-								<Button onClick={openNewDialog} size="lg" className="gap-2 text-xs md:text-sm">
+								<Button onClick={openNewDialog} size="lg" className="gap-2 text-xs md:text-sm h-9 md:h-10">
 									<Plus className="h-3 w-3 md:h-4 md:w-4" />
 									Add First Image Model
 								</Button>
 							</CardContent>
 						</Card>
 					) : (
-						<motion.div variants={container} initial="hidden" animate="show" className="grid gap-4">
+						<motion.div
+							variants={container}
+							initial="hidden"
+							animate="show"
+							className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+						>
 							<AnimatePresence mode="popLayout">
-								{userConfigs?.map((config) => (
-									<motion.div
-										key={config.id}
-										variants={item}
-										layout
-										exit={{ opacity: 0, scale: 0.95 }}
-									>
-										<Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border-muted-foreground/10 hover:border-teal-500/30">
-											<CardContent className="p-0">
-												<div className="flex">
-													<div className="w-1 md:w-1.5 bg-gradient-to-b from-teal-500/50 to-cyan-500/50 group-hover:from-teal-500 group-hover:to-cyan-500 transition-colors" />
-													<div className="flex-1 p-3 md:p-5">
-														<div className="flex items-start justify-between gap-2">
-															<div className="flex items-start gap-2 md:gap-4 flex-1 min-w-0">
-																<div className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-lg md:rounded-xl bg-gradient-to-br from-teal-500/10 to-cyan-500/10 shrink-0">
-																	<ImageIcon className="h-5 w-5 md:h-6 md:w-6 text-teal-600 dark:text-teal-400" />
-																</div>
-																<div className="flex-1 min-w-0 space-y-2">
-																	<div className="flex items-center gap-1.5 flex-wrap">
-																		<h4 className="text-sm md:text-base font-semibold truncate">
-																			{config.name}
-																		</h4>
-																		<Badge
-																			variant="secondary"
-																			className="text-[9px] md:text-[10px] px-1.5 py-0.5 bg-teal-500/10 text-teal-700 dark:text-teal-300 border-teal-500/20"
+								{userConfigs?.map((config) => {
+									const member = config.user_id ? memberMap.get(config.user_id) : null;
+
+									return (
+										<motion.div
+											key={config.id}
+											variants={item}
+											layout
+											exit={{ opacity: 0, scale: 0.95 }}
+										>
+											<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+												<CardContent className="p-4 flex flex-col gap-3 h-full">
+													{/* Header: Name + Actions */}
+													<div className="flex items-start justify-between gap-2">
+														<div className="min-w-0 flex-1">
+															<h4 className="text-sm font-semibold tracking-tight truncate">
+																{config.name}
+															</h4>
+															{config.description && (
+																<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
+																	{config.description}
+																</p>
+															)}
+														</div>
+														<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
+															<TooltipProvider>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			onClick={() => openEditDialog(config)}
+																			className="h-7 w-7 text-muted-foreground hover:text-foreground"
 																		>
-																			{config.provider}
-																		</Badge>
-																	</div>
-																	<code className="text-[10px] md:text-xs font-mono text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded-md inline-block">
-																		{config.model_name}
-																	</code>
-																	{config.description && (
-																		<p className="text-[10px] md:text-xs text-muted-foreground line-clamp-1">
-																			{config.description}
-																		</p>
-																	)}
-																	<div className="flex items-center gap-2 md:gap-4 pt-1">
-																		<div className="flex items-center gap-1 md:gap-1.5 text-[10px] md:text-xs text-muted-foreground">
-																			<Clock className="h-2.5 w-2.5 md:h-3 md:w-3" />
-																			{new Date(config.created_at).toLocaleDateString()}
-																		</div>
-																		{config.user_id && memberMap.get(config.user_id) && (
-																			<div className="flex items-center gap-1 md:gap-1.5 text-[10px] md:text-xs text-muted-foreground">
-																				<User className="h-2.5 w-2.5 md:h-3 md:w-3" />
-																				<span>{memberMap.get(config.user_id)?.name}</span>
-																			</div>
-																		)}
-																	</div>
-																</div>
-															</div>
-															<div className="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-																<TooltipProvider>
-																	<Tooltip>
-																		<TooltipTrigger asChild>
-																			<Button
-																				variant="ghost"
-																				size="sm"
-																				onClick={() => openEditDialog(config)}
-																				className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-																			>
-																				<Edit3 className="h-3.5 w-3.5" />
-																			</Button>
-																		</TooltipTrigger>
-																		<TooltipContent>Edit</TooltipContent>
-																	</Tooltip>
-																</TooltipProvider>
-																<TooltipProvider>
-																	<Tooltip>
-																		<TooltipTrigger asChild>
-																			<Button
-																				variant="ghost"
-																				size="sm"
-																				onClick={() => setConfigToDelete(config)}
-																				className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
-																			>
-																				<Trash2 className="h-3.5 w-3.5" />
-																			</Button>
-																		</TooltipTrigger>
-																		<TooltipContent>Delete</TooltipContent>
-																	</Tooltip>
-																</TooltipProvider>
-															</div>
+																			<Edit3 className="h-3 w-3" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent>Edit</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+															<TooltipProvider>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			onClick={() => setConfigToDelete(config)}
+																			className="h-7 w-7 text-muted-foreground hover:text-destructive"
+																		>
+																			<Trash2 className="h-3 w-3" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent>Delete</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
 														</div>
 													</div>
-												</div>
-											</CardContent>
-										</Card>
-									</motion.div>
-								))}
+
+													{/* Provider + Model */}
+													<div className="flex items-center gap-2 flex-wrap">
+														<Badge
+															variant="secondary"
+															className="text-[10px] font-medium px-2 py-0.5 bg-teal-500/10 text-teal-700 dark:text-teal-300 border-teal-500/20"
+														>
+															{config.provider}
+														</Badge>
+														<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
+															{config.model_name}
+														</code>
+													</div>
+
+													{/* Footer: Date + Creator */}
+													<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
+														<span className="text-[11px] text-muted-foreground/60">
+															{new Date(config.created_at).toLocaleDateString(
+																undefined,
+																{
+																	year: "numeric",
+																	month: "short",
+																	day: "numeric",
+																}
+															)}
+														</span>
+														{member && (
+															<>
+																<span className="text-muted-foreground/30">·</span>
+																<TooltipProvider>
+																	<Tooltip>
+																		<TooltipTrigger asChild>
+																			<div className="flex items-center gap-1.5 cursor-default">
+																				{member.avatarUrl ? (
+																					<Image
+																						src={member.avatarUrl}
+																						alt={member.name}
+																						width={18}
+																						height={18}
+																						className="h-4.5 w-4.5 rounded-full object-cover shrink-0"
+																					/>
+																				) : (
+																					<div className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/5 shrink-0">
+																						<span className="text-[9px] font-semibold text-primary">
+																							{getInitials(member.name)}
+																						</span>
+																					</div>
+																				)}
+																				<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
+																					{member.name}
+																				</span>
+																			</div>
+																		</TooltipTrigger>
+																		<TooltipContent side="bottom">
+																			{member.email || member.name}
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															</>
+														)}
+													</div>
+												</CardContent>
+											</Card>
+										</motion.div>
+									);
+								})}
 							</AnimatePresence>
 						</motion.div>
 					)}
@@ -608,14 +702,12 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 					}
 				}}
 			>
-				<DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
+				<DialogContent
+				className="max-w-lg max-h-[90vh] overflow-y-auto"
+				onOpenAutoFocus={(e) => e.preventDefault()}
+			>
 					<DialogHeader>
-						<DialogTitle className="flex items-center gap-2">
-							{editingConfig ? (
-								<Edit3 className="w-5 h-5 text-teal-600" />
-							) : (
-								<Plus className="w-5 h-5 text-teal-600" />
-							)}
+						<DialogTitle>
 							{editingConfig ? "Edit Image Model" : "Add Image Model"}
 						</DialogTitle>
 						<DialogDescription>

surfsense_web/components/settings/model-config-manager.tsx

@@ -47,6 +47,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import type { NewLLMConfig } from "@/contracts/types/new-llm-config.types";
@@ -84,17 +85,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const {
 		mutateAsync: createConfig,
 		isPending: isCreating,
-		error: createError,
 	} = useAtomValue(createNewLLMConfigMutationAtom);
 	const {
 		mutateAsync: updateConfig,
 		isPending: isUpdating,
-		error: updateError,
 	} = useAtomValue(updateNewLLMConfigMutationAtom);
 	const {
 		mutateAsync: deleteConfig,
 		isPending: isDeleting,
-		error: deleteError,
 	} = useAtomValue(deleteNewLLMConfigMutationAtom);
 
 	// Queries
@@ -128,7 +126,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const [configToDelete, setConfigToDelete] = useState<NewLLMConfig | null>(null);
 
 	const isSubmitting = isCreating || isUpdating;
-	const errors = [createError, updateError, deleteError, fetchError].filter(Boolean) as Error[];
 
 	const handleFormSubmit = useCallback(
 		async (formData: LLMConfigFormData) => {
@@ -145,7 +142,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 				setIsDialogOpen(false);
 				setEditingConfig(null);
 			} catch {
-				// Error handled by mutation
+				// Error is displayed inside the dialog by the form
 			}
 		},
 		[editingConfig, createConfig, updateConfig]
@@ -157,7 +154,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			await deleteConfig({ id: configToDelete.id });
 			setConfigToDelete(null);
 		} catch {
-			// Error handled by mutation
+			// Error handled by mutation state
 		}
 	};
 
@@ -195,29 +192,27 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 					size="sm"
 					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
 				>
-					<Plus className="h-3 w-3 md:h-4 md:w-4" />
 					Add Configuration
 				</Button>
 			</div>
 
-			{/* Error Alerts */}
+			{/* Fetch Error Alert */}
 			<AnimatePresence>
-				{errors.length > 0 &&
-					errors.map((err) => (
-						<motion.div
-							key={err?.message ?? `error-${Date.now()}-${Math.random()}`}
-							initial={{ opacity: 0, y: -10 }}
-							animate={{ opacity: 1, y: 0 }}
-							exit={{ opacity: 0, y: -10 }}
-						>
-							<Alert variant="destructive" className="py-3 md:py-4">
-								<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-								<AlertDescription className="text-xs md:text-sm">
-									{err?.message ?? "Something went wrong"}
-								</AlertDescription>
-							</Alert>
-						</motion.div>
-					))}
+				{fetchError && (
+					<motion.div
+						key="fetch-error"
+						initial={{ opacity: 0, y: -10 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -10 }}
+					>
+						<Alert variant="destructive" className="py-3 md:py-4">
+							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+							<AlertDescription className="text-xs md:text-sm">
+								{fetchError?.message ?? "Failed to load configurations"}
+							</AlertDescription>
+						</Alert>
+					</motion.div>
+				)}
 			</AnimatePresence>
 
 			{/* Global Configs Info */}
@@ -236,18 +231,39 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 				</motion.div>
 			)}
 
-			{/* Loading State */}
+			{/* Loading Skeleton */}
 			{isLoading && (
-				<Card>
-					<CardContent className="flex items-center justify-center py-10 md:py-16">
-						<div className="flex flex-col items-center gap-2 md:gap-3">
-							<Spinner size="md" className="md:h-8 md:w-8 text-muted-foreground" />
-							<span className="text-xs md:text-sm text-muted-foreground">
-								Loading configurations...
-							</span>
-						</div>
-					</CardContent>
-				</Card>
+				<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+						<Card key={key} className="border-border/60">
+							<CardContent className="p-4 flex flex-col gap-3">
+								{/* Header */}
+								<div className="flex items-start justify-between gap-2">
+									<div className="space-y-1.5 flex-1 min-w-0">
+										<Skeleton className="h-4 w-28 md:w-32" />
+										<Skeleton className="h-3 w-40 md:w-48" />
+									</div>
+								</div>
+								{/* Provider + Model */}
+								<div className="flex items-center gap-2">
+									<Skeleton className="h-5 w-16 rounded-full" />
+									<Skeleton className="h-5 w-24 rounded-md" />
+								</div>
+								{/* Feature badges */}
+								<div className="flex items-center gap-1.5">
+									<Skeleton className="h-5 w-20 rounded-full" />
+									<Skeleton className="h-5 w-16 rounded-full" />
+								</div>
+								{/* Footer */}
+								<div className="flex items-center gap-2 pt-2 border-t border-border/40">
+									<Skeleton className="h-3 w-20" />
+									<Skeleton className="h-4 w-4 rounded-full" />
+									<Skeleton className="h-3 w-16" />
+								</div>
+							</CardContent>
+						</Card>
+					))}
+				</div>
 			)}
 
 			{/* Configurations List */}
@@ -413,7 +429,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 																						</span>
 																					</div>
 																				)}
-																				<span className="text-[11px] text-muted-foreground/60 truncate max-w-[80px]">
+																				<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
 																					{member.name}
 																				</span>
 																			</div>
@@ -444,12 +460,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 					onOpenAutoFocus={(e) => e.preventDefault()}
 				>
 					<DialogHeader>
-						<DialogTitle className="flex items-center gap-2">
-							{editingConfig ? (
-								<Edit3 className="w-5 h-5 text-violet-600" />
-							) : (
-								<Plus className="w-5 h-5 text-violet-600" />
-							)}
+						<DialogTitle>
 							{editingConfig ? "Edit Configuration" : "Create New Configuration"}
 						</DialogTitle>
 						<DialogDescription>