ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1import AppHeader from "../components/AppHeader";
2import { SearchResultSkeleton } from "../components/common/LoadingSkeleton";
3import { getPlatform } from "../lib/utils/platform";
4import { StatsGroup } from "../components/common/Stats";
5import ProgressBar from "../components/common/ProgressBar";
6import PlatformBadge from "../components/common/PlatformBadge";
7
8interface atprotoSession {
9 did: string;
10 handle: string;
11 displayName?: string;
12 avatar?: string;
13 description?: string;
14}
15
16interface SearchProgress {
17 searched: number;
18 found: number;
19 total: number;
20}
21
22interface LoadingPageProps {
23 session: atprotoSession | null;
24 onLogout: () => void;
25 onNavigate: (step: "home" | "login") => void;
26 searchProgress: SearchProgress;
27 currentStep: string;
28 sourcePlatform: string;
29 isDark?: boolean;
30 reducedMotion?: boolean;
31 onToggleTheme?: () => void;
32 onToggleMotion?: () => void;
33}
34
35export default function LoadingPage({
36 session,
37 onLogout,
38 onNavigate,
39 searchProgress,
40 currentStep,
41 sourcePlatform,
42 isDark = false,
43 reducedMotion = false,
44 onToggleTheme,
45 onToggleMotion,
46}: LoadingPageProps) {
47 const platform = getPlatform(sourcePlatform);
48
49 const statsData = [
50 {
51 value: searchProgress.searched,
52 label: "Searched",
53 variant: "default" as const,
54 },
55 {
56 value: searchProgress.found,
57 label: "Fireflies Found",
58 variant: "highlight" as const,
59 },
60 { value: searchProgress.total, label: "Total", variant: "muted" as const },
61 ];
62
63 return (
64 <div className="min-h-screen">
65 <AppHeader
66 session={session}
67 onLogout={onLogout}
68 onNavigate={onNavigate}
69 currentStep={currentStep}
70 isDark={isDark}
71 reducedMotion={reducedMotion}
72 onToggleTheme={onToggleTheme}
73 onToggleMotion={onToggleMotion}
74 />
75
76 {/* Platform Banner - Searching State */}
77 <div
78 className={`bg-firefly-banner dark:bg-firefly-banner-dark text-white`}
79 >
80 <div className="max-w-3xl mx-auto px-4 py-6">
81 <div className="flex items-center justify-between">
82 <div className="flex items-center space-x-4">
83 <PlatformBadge
84 platformKey={sourcePlatform}
85 showName={false}
86 size="lg"
87 />
88 <div>
89 <h2 className="text-xl font-bold">Finding Your Fireflies</h2>
90 <p className="text-white text-sm">
91 Searching the ATmosphere for {platform.name} follows...
92 </p>
93 </div>
94 </div>
95 {searchProgress.found > 0 && (
96 <div className="text-right">
97 <div className="text-2xl font-bold">{searchProgress.found}</div>
98 <div className="text-xs text-white">found</div>
99 </div>
100 )}
101 </div>
102 </div>
103 </div>
104
105 {/* Progress Stats */}
106 <div className="bg-white/95 dark:bg-slate-900 border-b-2 border-cyan-500/30 dark:border-purple-500/30 backdrop-blur-sm">
107 <div className="max-w-3xl mx-auto px-4 py-4">
108 <StatsGroup stats={statsData} className="grid-cols-3 mb-4" />
109
110 <ProgressBar
111 current={searchProgress.searched}
112 total={searchProgress.total}
113 variant="search"
114 />
115 </div>
116 </div>
117
118 {/* Skeleton Results - Matches layout of Results page */}
119 <div className="max-w-3xl mx-auto px-4 py-4 space-y-4">
120 {[...Array(8)].map((_, i) => (
121 <SearchResultSkeleton key={i} />
122 ))}
123 </div>
124 </div>
125 );
126}