feat: replace unified loading approach with global loading provider and refactor loading handling across components

- Introduced GlobalLoadingProvider to manage a consistent loading overlay across the application.
- Replaced existing loading implementations with useGlobalLoadingEffect hook for better control and to prevent animation resets.
- Updated components such as LoginPage, AuthCallbackPage, and DashboardLayout to utilize the new global loading mechanism.
- Removed UnifiedLoadingScreen component to streamline loading management and enhance user experience.

surfsense_web/app/(home)/layout.tsx

@@ -1,14 +1,18 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import { FooterNew } from "@/components/homepage/footer-new";
 import { Navbar } from "@/components/homepage/navbar";
 
 export default function HomePageLayout({ children }: { children: React.ReactNode }) {
+	const pathname = usePathname();
+	const isAuthPage = pathname === "/login" || pathname === "/register";
+
 	return (
 		<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
 			<Navbar />
 			{children}
-			<FooterNew />
+			{!isAuthPage && <FooterNew />}
 		</main>
 	);
 }

surfsense_web/app/(home)/login/page.tsx

@@ -6,7 +6,7 @@ import { useTranslations } from "next-intl";
 import { Suspense, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Logo } from "@/components/Logo";
-import { UnifiedLoadingScreen } from "@/components/ui/unified-loading-screen";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 import { getAuthErrorDetails, shouldRetry } from "@/lib/auth-errors";
 import { AUTH_TYPE } from "@/lib/env-config";
 import { AmbientBackground } from "./AmbientBackground";
@@ -92,9 +92,12 @@ function LoginContent() {
 		setIsLoading(false);
 	}, [searchParams, t, tCommon]);
 
-	// Show loading state while determining auth type
+	// Use global loading screen for auth type determination - spinner animation won't reset
+	useGlobalLoadingEffect(isLoading, tCommon("loading"), "login");
+
+	// Show nothing while loading - the GlobalLoadingProvider handles the loading UI
 	if (isLoading) {
-		return <UnifiedLoadingScreen variant="login" message={tCommon("loading")} />;
+		return null;
 	}
 
 	if (authType === "GOOGLE") {
@@ -176,8 +179,9 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
+	// Suspense fallback returns null - the GlobalLoadingProvider handles the loading UI
 	return (
-		<Suspense fallback={<UnifiedLoadingScreen variant="login" message="Loading" />}>
+		<Suspense fallback={null}>
 			<LoginContent />
 		</Suspense>
 	);

surfsense_web/app/auth/callback/loading.tsx

@@ -1,21 +1,14 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Spinner } from "@/components/ui/spinner";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 
 export default function AuthCallbackLoading() {
 	const t = useTranslations("auth");
-	return (
-		<div className="fixed inset-0 z-[9999] flex min-h-screen flex-col items-center justify-center bg-background">
-			<div className="flex flex-col items-center space-y-4">
-				<div className="h-12 w-12 flex items-center justify-center">
-					<Spinner size="xl" className="text-primary" />
-				</div>
-				<span className="text-muted-foreground text-sm min-h-[1.25rem] text-center max-w-md px-4">
-					{t("processing_authentication")}
-				</span>
-			</div>
-		</div>
-	);
-}
 
+	// Use global loading - spinner animation won't reset when page transitions
+	useGlobalLoadingEffect(true, t("processing_authentication"), "default");
+
+	// Return null - the GlobalLoadingProvider handles the loading UI
+	return null;
+}

surfsense_web/app/auth/callback/page.tsx

@@ -1,15 +1,13 @@
 "use client";
 
 import { Suspense } from "react";
-import { useTranslations } from "next-intl";
-import { UnifiedLoadingScreen } from "@/components/ui/unified-loading-screen";
 import TokenHandler from "@/components/TokenHandler";
 
 export default function AuthCallbackPage() {
-	const t = useTranslations("auth");
-	
+	// Suspense fallback returns null - the GlobalLoadingProvider handles the loading UI
+	// TokenHandler uses useGlobalLoadingEffect to show the loading screen
 	return (
-		<Suspense fallback={<UnifiedLoadingScreen variant="default" message={t("processing_authentication")} />}>
+		<Suspense fallback={null}>
 			<TokenHandler
 				redirectPath="/dashboard"
 				tokenParamName="token"

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -18,7 +18,7 @@ import { DashboardBreadcrumb } from "@/components/dashboard-breadcrumb";
 import { LayoutDataProvider } from "@/components/layout";
 import { OnboardingTour } from "@/components/onboarding-tour";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { UnifiedLoadingScreen } from "@/components/ui/unified-loading-screen";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 
 export function DashboardClientLayout({
 	children,
@@ -146,18 +146,22 @@ export function DashboardClientLayout({
 		setActiveSearchSpaceIdState(activeSeacrhSpaceId);
 	}, [search_space_id, setActiveSearchSpaceIdState]);
 
-	if (
-		(!hasCheckedOnboarding &&
+	// Determine if we should show loading
+	const shouldShowLoading =
+		((!hasCheckedOnboarding &&
 			(loading || accessLoading || globalConfigsLoading) &&
 			!isOnboardingPage) ||
-		isAutoConfiguring
-	) {
-		return (
-			<UnifiedLoadingScreen
-				variant="default"
-				message={isAutoConfiguring ? t("setting_up_ai") : t("checking_llm_prefs")}
-			/>
-		);
+			isAutoConfiguring);
+
+	// Use global loading screen - spinner animation won't reset
+	useGlobalLoadingEffect(
+		shouldShowLoading,
+		isAutoConfiguring ? t("setting_up_ai") : t("checking_llm_prefs"),
+		"default"
+	);
+
+	if (shouldShowLoading) {
+		return null;
 	}
 
 	if (error && !hasCheckedOnboarding && !isOnboardingPage) {

surfsense_web/app/dashboard/layout.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { UnifiedLoadingScreen } from "@/components/ui/unified-loading-screen";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 import { getBearerToken, redirectToLogin } from "@/lib/auth-utils";
 
 interface DashboardLayoutProps {
@@ -13,6 +13,9 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 	const t = useTranslations("dashboard");
 	const [isCheckingAuth, setIsCheckingAuth] = useState(true);
 
+	// Use the global loading screen - spinner animation won't reset
+	useGlobalLoadingEffect(isCheckingAuth, t("checking_auth"), "default");
+
 	useEffect(() => {
 		// Check if user is authenticated
 		const token = getBearerToken();
@@ -24,9 +27,9 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 		setIsCheckingAuth(false);
 	}, []);
 
-	// Show loading screen while checking authentication
+	// Return null while loading - the global provider handles the loading UI
 	if (isCheckingAuth) {
-		return <UnifiedLoadingScreen variant="default" message={t("checking_auth")} />;
+		return null;
 	}
 
 	return (

surfsense_web/app/dashboard/loading.tsx

@@ -1,21 +1,14 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Spinner } from "@/components/ui/spinner";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 
 export default function DashboardLoading() {
 	const t = useTranslations("common");
-	return (
-		<div className="fixed inset-0 z-[9999] flex min-h-screen flex-col items-center justify-center bg-background">
-			<div className="flex flex-col items-center space-y-4">
-				<div className="h-12 w-12 flex items-center justify-center">
-					<Spinner size="xl" className="text-primary" />
-				</div>
-				<span className="text-muted-foreground text-sm min-h-[1.25rem] text-center max-w-md px-4">
-					{t("loading")}
-				</span>
-			</div>
-		</div>
-	);
-}
 
+	// Use global loading - spinner animation won't reset when page transitions
+	useGlobalLoadingEffect(true, t("loading"), "default");
+
+	// Return null - the GlobalLoadingProvider handles the loading UI
+	return null;
+}

surfsense_web/app/dashboard/page.tsx

@@ -18,7 +18,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { UnifiedLoadingScreen } from "@/components/ui/unified-loading-screen";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 
 function ErrorScreen({ message }: { message: string }) {
 	const t = useTranslations("dashboard");
@@ -102,11 +102,16 @@ export default function DashboardPage() {
 		}
 	}, [isLoading, searchSpaces, router]);
 
-	if (isLoading) return <UnifiedLoadingScreen variant="default" message={t("fetching_spaces")} />;
+	// Show loading while fetching or while we have spaces and are about to redirect
+	const shouldShowLoading = isLoading || searchSpaces.length > 0;
+
+	// Use global loading screen - spinner animation won't reset
+	useGlobalLoadingEffect(shouldShowLoading, t("fetching_spaces"), "default");
+
 	if (error) return <ErrorScreen message={error?.message || "Failed to load search spaces"} />;
 
-	if (searchSpaces.length > 0) {
-		return <UnifiedLoadingScreen variant="default" message={t("fetching_spaces")} />;
+	if (shouldShowLoading) {
+		return null;
 	}
 
 	return (

surfsense_web/app/layout.tsx

@@ -3,6 +3,7 @@ import "./globals.css";
 import { RootProvider } from "fumadocs-ui/provider/next";
 import { Roboto } from "next/font/google";
 import { ElectricProvider } from "@/components/providers/ElectricProvider";
+import { GlobalLoadingProvider } from "@/components/providers/GlobalLoadingProvider";
 import { I18nProvider } from "@/components/providers/I18nProvider";
 import { PostHogProvider } from "@/components/providers/PostHogProvider";
 import { ThemeProvider } from "@/components/theme/theme-provider";
@@ -104,7 +105,9 @@ export default function RootLayout({
 							>
 								<RootProvider>
 									<ReactQueryClientProvider>
-										<ElectricProvider>{children}</ElectricProvider>
+										<ElectricProvider>
+											<GlobalLoadingProvider>{children}</GlobalLoadingProvider>
+										</ElectricProvider>
 									</ReactQueryClientProvider>
 									<Toaster />
 								</RootProvider>