legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance loading and error boundary components with improved styling and messaging

Browse Source
This commit is contained in:
Ardeman 2025-03-19 18:18:00 +08:00
parent deeefda8bc
commit 66de3dcf04
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/routes/_news._index.tsx
View File

@ -69,9 +69,16 @@ clientLoader.hydrate = true as const
export const HydrateFallback = () => { export const HydrateFallback = () => {
return ( return (
<Card> <Card>
<div className="flex h-96 items-center justify-center gap-1"> <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<ArrowPathIcon className="size-5 animate-spin" />{' '} <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
<span>Loading...</span> Loading...
</h2>
<p className="text-xl font-light text-[#777777] italic sm:text-2xl">
Please wait while we load the content.
</p>
</div>
<div className="flex items-center justify-center p-10">
<ArrowPathIcon className="size-10 animate-spin" />
</div> </div>
</Card> </Card>
) )
@ -95,10 +102,16 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
return ( return (
<Card> <Card>
<h1>{message}</h1> <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<p>{details}</p> <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{message}
</h2>
<p className="text-xl font-light text-[#777777] italic sm:text-2xl">
{details}
</p>
</div>
{stack && ( {stack && (
<pre className="w-full p-4 whitespace-pre-wrap"> <pre className="w-full whitespace-pre-wrap">
<code>{stack}</code> <code>{stack}</code>
</pre> </pre>
)} )}