add error boundaries, loading skeleton thruout, code split, lazy pg cmpnts, setting context, form validation, and list virtualization. broke out-fill login handle, i'll fix that later

package-lock.json

···
         "@icons-pack/react-simple-icons": "^13.8.0",
         "@neondatabase/serverless": "^1.0.2",
         "@netlify/functions": "^4.2.7",
+        "@tanstack/react-virtual": "^3.13.13",
         "actor-typeahead": "^0.1.2",
         "cookie": "^1.0.2",
         "jose": "^6.1.0",
···
       "resolved": "https://registry.npmjs.org/@atcute/identity/-/identity-1.1.0.tgz",
       "integrity": "sha512-6vRvRqJatDB+JUQsb+UswYmtBGQnSZcqC3a2y6H5DB/v5KcIh+6nFFtc17G0+3W9rxdk7k9M4KkgkdKf/YDNoQ==",
       "license": "0BSD",
-      "peer": true,
       "dependencies": {
         "@atcute/lexicons": "^1.1.1",
         "@badrap/valita": "^0.4.5"
···
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
···
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
···
         "@svgr/core": "*"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.13.tgz",
+      "integrity": "sha512-4o6oPMDvQv+9gMi8rE6gWmsOjtUZUYIJHv7EB+GblyYdi8U6OqLl8rhHWIUZSL1dUU2dPwTdTgybCKf9EjIrQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.13.tgz",
+      "integrity": "sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
···
       "integrity": "sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
···
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
···
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
···
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
···
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
···
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
···
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

package.json

···
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@neondatabase/serverless": "^1.0.2",
     "@netlify/functions": "^4.2.7",
+    "@tanstack/react-virtual": "^3.13.13",
     "actor-typeahead": "^0.1.2",
     "cookie": "^1.0.2",
     "jose": "^6.1.0",

src/App.tsx

···
-import { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, Suspense, lazy } from "react";
 import { ArrowRight } from "lucide-react";
-import LoginPage from "./pages/Login";
-import HomePage from "./pages/Home";
-import LoadingPage from "./pages/Loading";
-import ResultsPage from "./pages/Results";
 import { useAuth } from "./hooks/useAuth";
 import { useSearch } from "./hooks/useSearch";
 import { useFollow } from "./hooks/useFollows";
···
 import { useNotifications } from "./hooks/useNotifications";
 import Firefly from "./components/Firefly";
 import NotificationContainer from "./components/common/NotificationContainer";
+import ErrorBoundary from "./components/common/ErrorBoundary";
+import { SearchResultSkeleton } from "./components/common/LoadingSkeleton";
 import { DEFAULT_SETTINGS } from "./types/settings";
 import type { UserSettings, SearchResult } from "./types";
 import { apiClient } from "./lib/api/client";
 import { ATPROTO_APPS } from "./config/atprotoApps";
+import { useSettings } from "./contexts/SettingsContext";
+
+// Lazy load page components
+const LoginPage = lazy(() => import("./pages/Login"));
+const HomePage = lazy(() => import("./pages/Home"));
+const LoadingPage = lazy(() => import("./pages/Loading"));
+const ResultsPage = lazy(() => import("./pages/Results"));
+
+// Loading fallback component
+const PageLoader: React.FC = () => (
+  <div className="p-6 max-w-md mx-auto mt-8">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 text-center space-y-4">
+      <div className="w-16 h-16 bg-firefly-banner dark:bg-firefly-banner-dark text-white rounded-2xl mx-auto flex items-center justify-center">
+        <ArrowRight className="w-8 h-8 text-white animate-pulse" />
+      </div>
+      <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+        Loading...
+      </h2>
+    </div>
+  </div>
+);
 
 export default function App() {
   // Auth hook
···
   const [savedUploads, setSavedUploads] = useState<Set<string>>(new Set());
 
   // Settings state
-  const [userSettings, setUserSettings] = useState<UserSettings>(() => {
-    const saved = localStorage.getItem("atlast_settings");
-    return saved ? JSON.parse(saved) : DEFAULT_SETTINGS;
-  });
-
-  // Save settings to localStorage whenever they change
-  useEffect(() => {
-    localStorage.setItem("atlast_settings", JSON.stringify(userSettings));
-  }, [userSettings]);
-
-  const handleSettingsUpdate = useCallback(
-    (newSettings: Partial<UserSettings>) => {
-      setUserSettings((prev) => ({ ...prev, ...newSettings }));
-    },
-    [],
-  );
+  const { settings: userSettings, updateSettings: handleSettingsUpdate } =
+    useSettings();
 
   // Search hook
   const {
···
   }, [logout, setSearchResults, success, error]);
 
   return (
-    <div className="min-h-screen relative overflow-hidden">
-      {/* Notification Container */}
-      <NotificationContainer
-        notifications={notifications}
-        onRemove={removeNotification}
-      />
+    <ErrorBoundary>
+      <div className="min-h-screen relative overflow-hidden">
+        {/* Notification Container */}
+        <NotificationContainer
+          notifications={notifications}
+          onRemove={removeNotification}
+        />
+
+        {/* Firefly particles - only render if motion not reduced */}
+        {!reducedMotion && (
+          <div className="fixed inset-0 pointer-events-none" aria-hidden="true">
+            {[...Array(15)].map((_, i) => (
+              <Firefly
+                key={i}
+                delay={i * 0.5}
+                duration={3 + Math.random() * 2}
+              />
+            ))}
+          </div>
+        )}
 
-      {/* Firefly particles - only render if motion not reduced */}
-      {!reducedMotion && (
-        <div className="fixed inset-0 pointer-events-none" aria-hidden="true">
-          {[...Array(15)].map((_, i) => (
-            <Firefly key={i} delay={i * 0.5} duration={3 + Math.random() * 2} />
-          ))}
+        {/* Status message for screen readers */}
+        <div
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          className="sr-only"
+        >
+          {statusMessage}
         </div>
-      )}
 
-      {/* Status message for screen readers */}
-      <div
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        className="sr-only"
-      >
-        {statusMessage}
-      </div>
+        {/* Skip to main content link */}
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-firefly-orange focus:text-white focus:px-4 focus:py-2 focus:rounded-lg"
+        >
+          Skip to main content
+        </a>
 
-      {/* Skip to main content link */}
-      <a
-        href="#main-content"
-        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-firefly-orange focus:text-white focus:px-4 focus:py-2 focus:rounded-lg"
-      >
-        Skip to main content
-      </a>
+        <main id="main-content">
+          <Suspense fallback={<PageLoader />}>
+            {/* Checking Session */}
+            {currentStep === "checking" && <PageLoader />}
 
-      <main id="main-content">
-        {/* Checking Session */}
-        {currentStep === "checking" && (
-          <div className="p-6 max-w-md mx-auto mt-8">
-            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 text-center space-y-4">
-              <div className="w-16 h-16 bg-firefly-banner dark:bg-firefly-banner-dark text-white rounded-2xl mx-auto flex items-center justify-center">
-                <ArrowRight className="w-8 h-8 text-white animate-pulse" />
-              </div>
-              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
-                Loading...
-              </h2>
-              <p className="text-gray-600 dark:text-gray-300">
-                Checking your session
-              </p>
-            </div>
-          </div>
-        )}
+            {/* Login Page */}
+            {currentStep === "login" && (
+              <ErrorBoundary fallbackType="inline">
+                <LoginPage
+                  onSubmit={handleLogin}
+                  session={session}
+                  onNavigate={setCurrentStep}
+                  reducedMotion={reducedMotion}
+                />
+              </ErrorBoundary>
+            )}
 
-        {/* Login Page */}
-        {currentStep === "login" && (
-          <LoginPage
-            onSubmit={handleLogin}
-            session={session}
-            onNavigate={setCurrentStep}
-            reducedMotion={reducedMotion}
-          />
-        )}
+            {/* Home/Dashboard Page */}
+            {currentStep === "home" && (
+              <ErrorBoundary fallbackType="inline">
+                <HomePage
+                  session={session}
+                  onLogout={handleLogout}
+                  onNavigate={setCurrentStep}
+                  onFileUpload={processFileUpload}
+                  onLoadUpload={handleLoadUpload}
+                  currentStep={currentStep}
+                  reducedMotion={reducedMotion}
+                  isDark={isDark}
+                  onToggleTheme={toggleTheme}
+                  onToggleMotion={toggleMotion}
+                  userSettings={userSettings}
+                  onSettingsUpdate={handleSettingsUpdate}
+                />
+              </ErrorBoundary>
+            )}
 
-        {/* Home/Dashboard Page */}
-        {currentStep === "home" && (
-          <HomePage
-            session={session}
-            onLogout={handleLogout}
-            onNavigate={setCurrentStep}
-            onFileUpload={processFileUpload}
-            onLoadUpload={handleLoadUpload}
-            currentStep={currentStep}
-            reducedMotion={reducedMotion}
-            isDark={isDark}
-            onToggleTheme={toggleTheme}
-            onToggleMotion={toggleMotion}
-            userSettings={userSettings}
-            onSettingsUpdate={handleSettingsUpdate}
-          />
-        )}
+            {/* Loading Page */}
+            {currentStep === "loading" && (
+              <ErrorBoundary fallbackType="inline">
+                <LoadingPage
+                  session={session}
+                  onLogout={handleLogout}
+                  onNavigate={setCurrentStep}
+                  searchProgress={searchProgress}
+                  currentStep={currentStep}
+                  sourcePlatform={currentPlatform}
+                  isDark={isDark}
+                  reducedMotion={reducedMotion}
+                  onToggleTheme={toggleTheme}
+                  onToggleMotion={toggleMotion}
+                />
+              </ErrorBoundary>
+            )}
 
-        {/* Loading Page */}
-        {currentStep === "loading" && (
-          <LoadingPage
-            session={session}
-            onLogout={handleLogout}
-            onNavigate={setCurrentStep}
-            searchProgress={searchProgress}
-            currentStep={currentStep}
-            sourcePlatform={currentPlatform}
-            isDark={isDark}
-            reducedMotion={reducedMotion}
-            onToggleTheme={toggleTheme}
-            onToggleMotion={toggleMotion}
-          />
-        )}
-
-        {/* Results Page */}
-        {currentStep === "results" && (
-          <ResultsPage
-            session={session}
-            onLogout={handleLogout}
-            onNavigate={setCurrentStep}
-            searchResults={searchResults}
-            expandedResults={expandedResults}
-            onToggleExpand={toggleExpandResult}
-            onToggleMatchSelection={toggleMatchSelection}
-            onSelectAll={() => selectAllMatches(setStatusMessage)}
-            onDeselectAll={() => deselectAllMatches(setStatusMessage)}
-            onFollowSelected={() => followSelectedUsers(setStatusMessage)}
-            totalSelected={totalSelected}
-            totalFound={totalFound}
-            isFollowing={isFollowing}
-            currentStep={currentStep}
-            sourcePlatform={currentPlatform}
-            destinationAppId={currentDestinationAppId}
-            reducedMotion={reducedMotion}
-            isDark={isDark}
-            onToggleTheme={toggleTheme}
-            onToggleMotion={toggleMotion}
-          />
-        )}
-      </main>
-    </div>
+            {/* Results Page */}
+            {currentStep === "results" && (
+              <ErrorBoundary fallbackType="inline">
+                <ResultsPage
+                  session={session}
+                  onLogout={handleLogout}
+                  onNavigate={setCurrentStep}
+                  searchResults={searchResults}
+                  expandedResults={expandedResults}
+                  onToggleExpand={toggleExpandResult}
+                  onToggleMatchSelection={toggleMatchSelection}
+                  onSelectAll={() => selectAllMatches(setStatusMessage)}
+                  onDeselectAll={() => deselectAllMatches(setStatusMessage)}
+                  onFollowSelected={() => followSelectedUsers(setStatusMessage)}
+                  totalSelected={totalSelected}
+                  totalFound={totalFound}
+                  isFollowing={isFollowing}
+                  currentStep={currentStep}
+                  sourcePlatform={currentPlatform}
+                  destinationAppId={currentDestinationAppId}
+                  reducedMotion={reducedMotion}
+                  isDark={isDark}
+                  onToggleTheme={toggleTheme}
+                  onToggleMotion={toggleMotion}
+                />
+              </ErrorBoundary>
+            )}
+          </Suspense>
+        </main>
+      </div>
+    </ErrorBoundary>
   );
 }

src/components/HistoryTab.tsx

···
 import type { Upload as UploadType } from "../types";
 import FaviconIcon from "../components/FaviconIcon";
 import type { UserSettings } from "../types/settings";
+import { UploadHistorySkeleton } from "./common/LoadingSkeleton";
 import { getPlatformColor } from "../lib/utils/platform";
 import { formatRelativeTime } from "../lib/utils/date";
 
···
       )}
 
       {isLoading ? (
-        <div className="space-y-6">
+        <div className="space-y-3">
           {[...Array(3)].map((_, i) => (
-            <div
-              key={i}
-              className="animate-pulse flex items-center space-x-4 p-4 bg-purple-100/50 dark:bg-slate-900/50 rounded-xl border-2 border-purple-500/30 dark:border-cyan-500/30"
-            >
-              <div className="w-12 h-12 bg-purple-200 dark:bg-slate-600 rounded-xl" />
-              <div className="flex-1 space-y-2">
-                <div className="h-4 bg-purple-200 dark:bg-slate-600 rounded w-3/4" />
-                <div className="h-3 bg-purple-200 dark:bg-slate-600 rounded w-1/2" />
-              </div>
-            </div>
+            <UploadHistorySkeleton key={i} />
           ))}
         </div>
       ) : uploads.length === 0 ? (

src/components/VirtualizedResultsList.tsx

···
+import React, { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import SearchResultCard from "./SearchResultCard";
+import type { SearchResult } from "../types";
+import type { AtprotoAppId } from "../types/settings";
+
+interface VirtualizedResultsListProps {
+  results: SearchResult[];
+  expandedResults: Set<number>;
+  onToggleExpand: (index: number) => void;
+  onToggleMatchSelection: (resultIndex: number, did: string) => void;
+  sourcePlatform: string;
+  destinationAppId: AtprotoAppId;
+}
+
+const VirtualizedResultsList: React.FC<VirtualizedResultsListProps> = ({
+  results,
+  expandedResults,
+  onToggleExpand,
+  onToggleMatchSelection,
+  sourcePlatform,
+  destinationAppId,
+}) => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: results.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 200, // Estimated height per item
+    overscan: 5, // Render 5 extra items above/below viewport
+  });
+
+  return (
+    <div ref={parentRef} className="h-full overflow-auto">
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const result = results[virtualItem.index];
+
+          return (
+            <div
+              key={virtualItem.key}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualItem.size}px`,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            >
+              <div className="pb-4">
+                <SearchResultCard
+                  result={result}
+                  resultIndex={virtualItem.index}
+                  isExpanded={expandedResults.has(virtualItem.index)}
+                  onToggleExpand={() => onToggleExpand(virtualItem.index)}
+                  onToggleMatchSelection={(did) =>
+                    onToggleMatchSelection(virtualItem.index, did)
+                  }
+                  sourcePlatform={sourcePlatform}
+                  destinationAppId={destinationAppId}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default VirtualizedResultsList;

src/components/common/ErrorBoundary.tsx

···
+import React, { Component, ReactNode } from "react";
+import { AlertTriangle, RefreshCw, Home } from "lucide-react";
+
+interface Props {
+  children: ReactNode;
+  fallbackType?: "full" | "inline";
+  onReset?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Error boundary caught error:", error, errorInfo);
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+    if (this.props.onReset) {
+      this.props.onReset();
+    }
+  };
+
+  handleGoHome = () => {
+    window.location.href = "/";
+  };
+
+  render() {
+    if (this.state.hasError) {
+      const { fallbackType = "full" } = this.props;
+
+      if (fallbackType === "inline") {
+        return (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-xl">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h3 className="font-semibold text-red-900 dark:text-red-100 mb-1">
+                  Something went wrong
+                </h3>
+                <p className="text-sm text-red-800 dark:text-red-200 mb-3">
+                  {this.state.error?.message || "An unexpected error occurred"}
+                </p>
+                <button
+                  onClick={this.handleReset}
+                  className="inline-flex items-center gap-2 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                  Try Again
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      }
+
+      // Full page error
+      return (
+        <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-cyan-50 via-purple-50 to-pink-50 dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900">
+          <div className="max-w-md w-full bg-white dark:bg-slate-900 rounded-3xl shadow-2xl p-8 border-2 border-red-500">
+            <div className="flex justify-center mb-6">
+              <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-2xl flex items-center justify-center">
+                <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+              </div>
+            </div>
+
+            <h1 className="text-2xl font-bold text-center text-purple-950 dark:text-cyan-50 mb-2">
+              Oops! Something went wrong
+            </h1>
+
+            <p className="text-center text-purple-750 dark:text-cyan-250 mb-6">
+              We encountered an unexpected error. Don't worry, your data is
+              safe.
+            </p>
+
+            {process.env.NODE_ENV === "development" && this.state.error && (
+              <details className="mb-6 p-4 bg-slate-100 dark:bg-slate-800 rounded-lg text-xs">
+                <summary className="cursor-pointer font-semibold text-purple-900 dark:text-cyan-100 mb-2">
+                  Error Details (Dev Only)
+                </summary>
+                <pre className="overflow-auto text-red-600 dark:text-red-400">
+                  {this.state.error.toString()}
+                  {this.state.errorInfo?.componentStack}
+                </pre>
+              </details>
+            )}
+
+            <div className="flex gap-3">
+              <button
+                onClick={this.handleReset}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-orange-600 hover:bg-orange-500 text-white font-semibold rounded-xl transition-colors"
+              >
+                <RefreshCw className="w-5 h-5" />
+                Try Again
+              </button>
+              <button
+                onClick={this.handleGoHome}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-xl transition-colors"
+              >
+                <Home className="w-5 h-5" />
+                Go Home
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/common/LoadingSkeleton.tsx

···
+import React from "react";
+import Skeleton from "./Skeleton";
+
+export const SearchResultSkeleton: React.FC = () => {
+  return (
+    <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-sm overflow-hidden border-2 border-slate-200 dark:border-slate-700">
+      {/* Source User Skeleton */}
+      <div className="p-4 bg-slate-50 dark:bg-slate-900/50 border-b-2 border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3">
+          <Skeleton variant="circular" width={40} height={40} />
+          <div className="flex-1 space-y-2">
+            <Skeleton height={16} width="40%" />
+            <Skeleton height={12} width="30%" />
+          </div>
+          <Skeleton height={20} width={64} className="rounded-full" />
+        </div>
+      </div>
+
+      {/* Match Skeleton */}
+      <div className="p-4">
+        <div className="flex items-start space-x-3 p-3 rounded-xl bg-amber-50 dark:bg-amber-900/10 border-2 border-amber-200 dark:border-amber-800/30">
+          <Skeleton variant="circular" width={48} height={48} />
+          <div className="flex-1 space-y-2">
+            <Skeleton height={16} width="75%" />
+            <Skeleton height={12} width="50%" />
+            <Skeleton height={12} width="100%" />
+            <div className="flex gap-2 mt-2">
+              <Skeleton height={20} width={80} className="rounded-full" />
+              <Skeleton height={20} width={100} className="rounded-full" />
+            </div>
+          </div>
+          <Skeleton width={80} height={32} className="rounded-full" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const UploadHistorySkeleton: React.FC = () => {
+  return (
+    <div className="flex items-center space-x-4 p-4 bg-purple-100/50 dark:bg-slate-900/50 rounded-xl border-2 border-purple-500/30 dark:border-cyan-500/30">
+      <Skeleton variant="rectangular" width={48} height={48} />
+      <div className="flex-1 space-y-2">
+        <Skeleton height={16} width="60%" />
+        <Skeleton height={12} width="40%" />
+      </div>
+    </div>
+  );
+};
+
+export const ProfileSkeleton: React.FC = () => {
+  return (
+    <div className="flex items-center space-x-3 p-3">
+      <Skeleton variant="circular" width={48} height={48} />
+      <div className="flex-1 space-y-2">
+        <Skeleton height={16} width="50%" />
+        <Skeleton height={12} width="70%" />
+      </div>
+    </div>
+  );
+};

src/components/common/Skeleton.tsx

···
+import React from "react";
+
+interface SkeletonProps {
+  className?: string;
+  variant?: "text" | "circular" | "rectangular";
+  width?: string | number;
+  height?: string | number;
+  animate?: boolean;
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  className = "",
+  variant = "text",
+  width,
+  height,
+  animate = true,
+}) => {
+  const baseClasses = "bg-slate-200 dark:bg-slate-700";
+  const animateClass = animate ? "animate-pulse" : "";
+
+  const variantClasses = {
+    text: "rounded",
+    circular: "rounded-full",
+    rectangular: "rounded-lg",
+  };
+
+  const style: React.CSSProperties = {};
+  if (width) style.width = typeof width === "number" ? `${width}px` : width;
+  if (height)
+    style.height = typeof height === "number" ? `${height}px` : height;
+
+  return (
+    <div
+      className={`${baseClasses} ${variantClasses[variant]} ${animateClass} ${className}`}
+      style={style}
+      aria-hidden="true"
+    />
+  );
+};
+
+export default Skeleton;

src/contexts/SettingsContext.tsx

···
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+} from "react";
+import { DEFAULT_SETTINGS, UserSettings } from "../types/settings";
+
+interface SettingsContextType {
+  settings: UserSettings;
+  updateSettings: (newSettings: Partial<UserSettings>) => void;
+  resetSettings: () => void;
+  isLoading: boolean;
+}
+
+const SettingsContext = createContext<SettingsContextType | undefined>(
+  undefined,
+);
+
+export const useSettings = (): SettingsContextType => {
+  const context = useContext(SettingsContext);
+  if (!context) {
+    throw new Error("useSettings must be used within a SettingsProvider");
+  }
+  return context;
+};
+
+interface SettingsProviderProps {
+  children: ReactNode;
+}
+
+export const SettingsProvider: React.FC<SettingsProviderProps> = ({
+  children,
+}) => {
+  const [settings, setSettings] = useState<UserSettings>(DEFAULT_SETTINGS);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load settings from localStorage on mount
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("atlast_settings");
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        setSettings(parsed);
+      }
+    } catch (error) {
+      console.error("Failed to load settings:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Save settings to localStorage whenever they change
+  useEffect(() => {
+    if (!isLoading) {
+      try {
+        localStorage.setItem("atlast_settings", JSON.stringify(settings));
+      } catch (error) {
+        console.error("Failed to save settings:", error);
+      }
+    }
+  }, [settings, isLoading]);
+
+  const updateSettings = useCallback((newSettings: Partial<UserSettings>) => {
+    setSettings((prev) => ({ ...prev, ...newSettings }));
+  }, []);
+
+  const resetSettings = useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+    localStorage.removeItem("atlast_settings");
+  }, []);
+
+  const value: SettingsContextType = {
+    settings,
+    updateSettings,
+    resetSettings,
+    isLoading,
+  };
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};

src/hooks/useFormValidation.ts

···
+import { useState, useCallback } from "react";
+import { ValidationResult } from "../lib/validation";
+
+interface FieldState {
+  value: string;
+  error: string | null;
+  touched: boolean;
+}
+
+type ValidationFunction = (value: string) => ValidationResult;
+
+export function useFormValidation(initialValues: Record<string, string>) {
+  const [fields, setFields] = useState<Record<string, FieldState>>(() => {
+    const initial: Record<string, FieldState> = {};
+    Object.keys(initialValues).forEach((key) => {
+      initial[key] = {
+        value: initialValues[key],
+        error: null,
+        touched: false,
+      };
+    });
+    return initial;
+  });
+
+  const setValue = useCallback((fieldName: string, value: string) => {
+    setFields((prev) => ({
+      ...prev,
+      [fieldName]: {
+        ...prev[fieldName],
+        value,
+      },
+    }));
+  }, []);
+
+  const setError = useCallback((fieldName: string, error: string | null) => {
+    setFields((prev) => ({
+      ...prev,
+      [fieldName]: {
+        ...prev[fieldName],
+        error,
+      },
+    }));
+  }, []);
+
+  const setTouched = useCallback((fieldName: string) => {
+    setFields((prev) => ({
+      ...prev,
+      [fieldName]: {
+        ...prev[fieldName],
+        touched: true,
+      },
+    }));
+  }, []);
+
+  const validate = useCallback(
+    (fieldName: string, validationFn: ValidationFunction): boolean => {
+      const result = validationFn(fields[fieldName].value);
+      setFields((prev) => ({
+        ...prev,
+        [fieldName]: {
+          ...prev[fieldName],
+          error: result.error || null,
+          touched: true,
+        },
+      }));
+      return result.isValid;
+    },
+    [fields],
+  );
+
+  const validateAll = useCallback(
+    (validations: Record<string, ValidationFunction>): boolean => {
+      let isValid = true;
+      const newFields = { ...fields };
+
+      Object.keys(validations).forEach((fieldName) => {
+        const result = validations[fieldName](fields[fieldName].value);
+        newFields[fieldName] = {
+          ...newFields[fieldName],
+          error: result.error || null,
+          touched: true,
+        };
+        if (!result.isValid) {
+          isValid = false;
+        }
+      });
+
+      setFields(newFields);
+      return isValid;
+    },
+    [fields],
+  );
+
+  const reset = useCallback(() => {
+    const resetFields: Record<string, FieldState> = {};
+    Object.keys(fields).forEach((key) => {
+      resetFields[key] = {
+        value: "",
+        error: null,
+        touched: false,
+      };
+    });
+    setFields(resetFields);
+  }, [fields]);
+
+  const getFieldProps = useCallback(
+    (fieldName: string) => ({
+      value: fields[fieldName]?.value || "",
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        setValue(fieldName, e.target.value),
+      onBlur: () => setTouched(fieldName),
+    }),
+    [fields, setValue, setTouched],
+  );
+
+  return {
+    fields,
+    setValue,
+    setError,
+    setTouched,
+    validate,
+    validateAll,
+    reset,
+    getFieldProps,
+  };
+}

src/lib/validation.ts

···
+/**
+ * Validation utilities for forms
+ */
+
+export interface ValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+/**
+ * Validate AT Protocol handle
+ */
+export function validateHandle(handle: string): ValidationResult {
+  const trimmed = handle.trim();
+
+  if (!trimmed) {
+    return {
+      isValid: false,
+      error: "Please enter your handle",
+    };
+  }
+
+  // Remove @ if user included it
+  const cleanHandle = trimmed.startsWith("@") ? trimmed.slice(1) : trimmed;
+
+  // Basic format validation
+  if (cleanHandle.length < 3) {
+    return {
+      isValid: false,
+      error: "Handle is too short",
+    };
+  }
+
+  // Check for valid characters (alphanumeric, dots, hyphens)
+  const validFormat = /^[a-zA-Z0-9.-]+$/;
+  if (!validFormat.test(cleanHandle)) {
+    return {
+      isValid: false,
+      error: "Handle contains invalid characters",
+    };
+  }
+
+  // Must contain at least one dot (domain required)
+  if (!cleanHandle.includes(".")) {
+    return {
+      isValid: false,
+      error: "Handle must include a domain (e.g., username.bsky.social)",
+    };
+  }
+
+  // Can't start or end with dot or hyphen
+  if (/^[.-]|[.-]$/.test(cleanHandle)) {
+    return {
+      isValid: false,
+      error: "Handle cannot start or end with . or -",
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validate email format
+ */
+export function validateEmail(email: string): ValidationResult {
+  const trimmed = email.trim();
+
+  if (!trimmed) {
+    return {
+      isValid: false,
+      error: "Please enter your email",
+    };
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(trimmed)) {
+    return {
+      isValid: false,
+      error: "Please enter a valid email address",
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validate required field
+ */
+export function validateRequired(
+  value: string,
+  fieldName: string = "This field",
+): ValidationResult {
+  const trimmed = value.trim();
+
+  if (!trimmed) {
+    return {
+      isValid: false,
+      error: `${fieldName} is required`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validate minimum length
+ */
+export function validateMinLength(
+  value: string,
+  minLength: number,
+  fieldName: string = "This field",
+): ValidationResult {
+  const trimmed = value.trim();
+
+  if (trimmed.length < minLength) {
+    return {
+      isValid: false,
+      error: `${fieldName} must be at least ${minLength} characters`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validate maximum length
+ */
+export function validateMaxLength(
+  value: string,
+  maxLength: number,
+  fieldName: string = "This field",
+): ValidationResult {
+  if (value.length > maxLength) {
+    return {
+      isValid: false,
+      error: `${fieldName} must be ${maxLength} characters or less`,
+    };
+  }
+
+  return { isValid: true };
+}

src/main.tsx

···
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { SettingsProvider } from "./contexts/SettingsContext";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <SettingsProvider>
+      <App />
+    </SettingsProvider>
   </React.StrictMode>,
 );

src/pages/Loading.tsx

···
 import AppHeader from "../components/AppHeader";
+import { SearchResultSkeleton } from "../components/common/LoadingSkeleton";
 import { getPlatform } from "../lib/utils/platform";
 
 interface atprotoSession {
···
       {/* Skeleton Results - Matches layout of Results page */}
       <div className="max-w-3xl mx-auto px-4 py-4 space-y-4">
         {[...Array(8)].map((_, i) => (
-          <div
-            key={i}
-            className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-sm overflow-hidden animate-pulse border-2 border-slate-200 dark:border-slate-700"
-          >
-            {/* Source User Skeleton */}
-            <div className="p-4 bg-slate-50 dark:bg-slate-900/50 border-b-2 border-slate-200 dark:border-slate-700">
-              <div className="flex items-center space-x-3">
-                <div className="w-10 h-10 bg-slate-300 dark:bg-slate-600 rounded-full" />
-                <div className="flex-1 space-y-2">
-                  <div className="h-4 bg-slate-300 dark:bg-slate-600 rounded w-32" />
-                  <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-24" />
-                </div>
-                <div className="h-5 w-16 bg-slate-300 dark:bg-slate-600 rounded-full" />
-              </div>
-            </div>
-
-            {/* Match Skeleton */}
-            <div className="p-4">
-              <div className="flex items-start space-x-3 p-3 rounded-xl bg-amber-50 dark:bg-amber-900/10 border-2 border-amber-200 dark:border-amber-800/30">
-                <div className="w-12 h-12 bg-slate-300 dark:bg-slate-600 rounded-full flex-shrink-0" />
-                <div className="flex-1 space-y-2">
-                  <div className="h-4 bg-slate-300 dark:bg-slate-600 rounded w-3/4" />
-                  <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-1/2" />
-                  <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-full" />
-                  <div className="h-5 w-20 bg-slate-300 dark:bg-slate-600 rounded-full mt-2" />
-                </div>
-                <div className="w-20 h-8 bg-slate-300 dark:bg-slate-600 rounded-full flex-shrink-0" />
-              </div>
-            </div>
-          </div>
+          <SearchResultSkeleton key={i} />
         ))}
       </div>
     </div>

src/pages/Login.tsx

···
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import "actor-typeahead";
-import { Heart, Upload, Search, ArrowRight } from "lucide-react";
+import { Heart, Upload, Search, ArrowRight, AlertCircle } from "lucide-react";
 import FireflyLogo from "../assets/at-firefly-logo.svg?react";
+import { useFormValidation } from "../hooks/useFormValidation";
+import { validateHandle } from "../lib/validation";
 
 interface LoginPageProps {
   onSubmit: (handle: string) => void;
···
   onNavigate,
   reducedMotion = false,
 }: LoginPageProps) {
-  const [handle, setHandle] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const { fields, setValue, validate, getFieldProps } = useFormValidation({
+    handle: "",
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Get the value directly from the input instead of state
-    const currentHandle = inputRef.current?.value || handle;
-    onSubmit(currentHandle);
+
+    // Get the value directly from the input
+    const currentHandle = inputRef.current?.value || fields.handle.value;
+    setValue("handle", currentHandle);
+
+    // Validate
+    const isValid = validate("handle", validateHandle);
+
+    if (!isValid) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit(currentHandle);
+    } catch (error) {
+      // Error handling is done in parent component
+      setIsSubmitting(false);
+    }
   };
 
   return (
···
                         ref={inputRef}
                         id="atproto-handle"
                         type="text"
-                        defaultValue={handle}
-                        onInput={(e) =>
-                          setHandle((e.target as HTMLInputElement).value)
-                        }
+                        {...getFieldProps("handle")}
                         placeholder="yourname.bsky.social"
-                        className="w-full px-4 py-3 bg-purple-50/50 dark:bg-slate-900/50 border-2 border-cyan-500/50 dark:border-purple-500/30 rounded-xl text-purple-900 dark:text-cyan-100 placeholder-purple-750/80 dark:placeholder-cyan-250/80 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 focus:border-transparent transition-all"
+                        className={`w-full px-4 py-3 bg-purple-50/50 dark:bg-slate-900/50 border-2 rounded-xl text-purple-900 dark:text-cyan-100 placeholder-purple-750/80 dark:placeholder-cyan-250/80 focus:outline-none focus:ring-2 transition-all ${
+                          fields.handle.touched && fields.handle.error
+                            ? "border-red-500 focus:ring-red-500"
+                            : "border-cyan-500/50 dark:border-purple-500/30 focus:ring-orange-500 dark:focus:ring-amber-400 focus:border-transparent"
+                        }`}
                         aria-required="true"
-                        aria-describedby="handle-description"
+                        aria-invalid={
+                          fields.handle.touched && !!fields.handle.error
+                        }
+                        aria-describedby={
+                          fields.handle.error
+                            ? "handle-error"
+                            : "handle-description"
+                        }
+                        disabled={isSubmitting}
                       />
                     </actor-typeahead>
+                    {fields.handle.touched && fields.handle.error && (
+                      <div
+                        id="handle-error"
+                        className="mt-2 flex items-center gap-2 text-sm text-red-600 dark:text-red-400"
+                        role="alert"
+                      >
+                        <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                        <span>{fields.handle.error}</span>
+                      </div>
+                    )}
                   </div>
 
                   <button
                     type="submit"
-                    className="w-full bg-firefly-banner dark:bg-firefly-banner-dark text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-orange-500 dark:focus:ring-amber-400 focus:outline-none"
+                    disabled={isSubmitting}
+                    className="w-full bg-firefly-banner dark:bg-firefly-banner-dark text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-orange-500 dark:focus:ring-amber-400 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
                     aria-label="Connect to the ATmosphere"
                   >
-                    Join the Swarm
+                    {isSubmitting ? (
+                      <>
+                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+                        <span>Connecting...</span>
+                      </>
+                    ) : (
+                      "Join the Swarm"
+                    )}
                   </button>
                 </form>
 

src/pages/Results.tsx

···
 import FaviconIcon from "../components/FaviconIcon";
 import type { AtprotoAppId } from "../types/settings";
 import { getPlatform, getAtprotoApp } from "../lib/utils/platform";
+import VirtualizedResultsList from "../components/VirtualizedResultsList";
 
 interface atprotoSession {
   did: string;
···
       </div>
 
       {/* Feed Results */}
-      <div className="max-w-3xl mx-auto px-4 py-4 space-y-4">
-        {sortedResults.map((result) => {
-          // Find the original index in unsorted array for state updates
-          const originalIndex = searchResults.findIndex(
-            (r) => r.sourceUser.username === result.sourceUser.username,
-          );
-          return (
-            <SearchResultCard
-              key={originalIndex}
-              result={result}
-              resultIndex={originalIndex}
-              isExpanded={expandedResults.has(originalIndex)}
-              onToggleExpand={() => onToggleExpand(originalIndex)}
-              onToggleMatchSelection={(did) =>
-                onToggleMatchSelection(originalIndex, did)
-              }
-              sourcePlatform={sourcePlatform}
-              destinationAppId={destinationAppId}
-            />
-          );
-        })}
+      <div className="max-w-3xl mx-auto px-4 py-4">
+        <VirtualizedResultsList
+          results={sortedResults}
+          expandedResults={expandedResults}
+          onToggleExpand={onToggleExpand}
+          onToggleMatchSelection={onToggleMatchSelection}
+          sourcePlatform={sourcePlatform}
+          destinationAppId={destinationAppId}
+        />
       </div>
 
       {/* Fixed Bottom Action Bar */}