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 = () => {
return (
<Card>
<div className="flex h-96 items-center justify-center gap-1">
<ArrowPathIcon className="size-5 animate-spin" />{' '}
<span>Loading...</span>
<div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
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>
</Card>
)
@ -95,10 +102,16 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
return (
<Card>
<h1>{message}</h1>
<p>{details}</p>
<div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<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 && (
<pre className="w-full p-4 whitespace-pre-wrap">
<pre className="w-full whitespace-pre-wrap">
<code>{stack}</code>
</pre>
)}