refactor: update loading and error boundary components to use Card for consistency

This commit is contained in:
Ardeman 2025-03-19 18:00:29 +08:00
parent abf7e829ba
commit deeefda8bc

View File

@ -69,7 +69,7 @@ clientLoader.hydrate = true as const
export const HydrateFallback = () => { export const HydrateFallback = () => {
return ( return (
<Card> <Card>
<div className="flex h-96 items-center justify-center"> <div className="flex h-96 items-center justify-center gap-1">
<ArrowPathIcon className="size-5 animate-spin" />{' '} <ArrowPathIcon className="size-5 animate-spin" />{' '}
<span>Loading...</span> <span>Loading...</span>
</div> </div>
@ -94,7 +94,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
} }
return ( return (
<div className="container mx-auto p-4"> <Card>
<h1>{message}</h1> <h1>{message}</h1>
<p>{details}</p> <p>{details}</p>
{stack && ( {stack && (
@ -102,7 +102,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
<code>{stack}</code> <code>{stack}</code>
</pre> </pre>
)} )}
</div> </Card>
) )
} }