add loading page

This commit is contained in:
sk1982 2024-03-12 21:06:33 -04:00
parent e4364cc39c
commit bba0136d8b
4 changed files with 16 additions and 4 deletions

View File

@ -0,0 +1,7 @@
import { Skeleton, Spinner } from '@nextui-org/react';
export default function Loading() {
return (<div className="w-full h-full flex flex-grow items-center justify-center">
<Spinner size="lg" />
</div>);
}

View File

@ -42,10 +42,15 @@ html {
font-family: Rodin, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
// offsets for header size of 5.5rem
.h-fixed {
height: calc(100% - 5.5rem);
}
.pt-fixed {
padding-top: 5.5rem;
}
.\@container-size {
container-type: size;
}

View File

@ -5,7 +5,7 @@ import { NextUIProvider } from '@nextui-org/react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
export function ClientProviders({ children }: { children: ReactNode }) {
return (<NextUIProvider className="h-full">
return (<NextUIProvider className="h-full flex">
<NextThemesProvider attribute="class" defaultTheme="dark" enableSystem>
{children}
</NextThemesProvider>

View File

@ -81,8 +81,8 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
</Button>
</div>
</div>
<div className="flex flex-col">
<div className="flex p-6 items-center flex-shrink-0 sticky top-0 bg-background/80 z-[9998] backdrop-blur-2xl">
<div className="flex flex-col flex-grow">
<div className="flex p-6 items-center flex-shrink-0 fixed top-0 left-0 w-full bg-background/80 z-[9998] backdrop-blur-2xl">
<Button className="text-2xl font-bold cursor-pointer flex items-center m-0 ps-1.5 pe-2 mr-6" variant="light"
onClick={() => setMenuOpen(true)}>
<Bars3Icon className="h-6 mt-0.5" />
@ -114,7 +114,7 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
</Button>
</div>
</div>
<div className="sm:px-5 flex-grow">
<div className="sm:px-5 flex-grow pt-fixed">
{children}
</div>
</div>