Add improved full screen loader

This commit is contained in:
Dries Augustyns
2025-12-04 09:27:14 +01:00
parent e4a43dfb57
commit 40e35735dc
4 changed files with 133 additions and 40 deletions
+3 -40
View File
@@ -5,6 +5,7 @@ import React, {useEffect} from 'react';
import {Toaster} from 'sonner';
import {SWRConfig} from 'swr';
import {DefaultSeo} from 'next-seo';
import {Loader} from '@plunk/ui';
import {ActiveProjectProvider} from '../lib/contexts/ActiveProjectProvider';
import {useProjects} from '../lib/hooks/useProject';
import {useUser} from '../lib/hooks/useUser';
@@ -43,26 +44,7 @@ function AuthGuard({children}: {children: React.ReactNode}) {
// Show loading state while checking authentication (only for protected routes)
if (isLoading && !isPublicRoute) {
return (
<div className="h-screen flex items-center justify-center">
<div className="text-center">
<svg
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<p className="mt-2 text-sm text-neutral-500">Loading...</p>
</div>
</div>
);
return <Loader message="Authenticating..." />;
}
// Don't render protected content if redirecting
@@ -87,26 +69,7 @@ function ProjectGuard({children}: {children: React.ReactNode}) {
// Show loading state while checking projects (only for routes that need a project)
if (isLoading && !isNoProjectRoute) {
return (
<div className="h-screen flex items-center justify-center">
<div className="text-center">
<svg
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<p className="mt-2 text-sm text-neutral-500">Loading...</p>
</div>
</div>
);
return <Loader message="Loading project..." />;
}
// Don't render protected content if redirecting