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

feat: enhance loading state with spinner and card component in HydrateFallback

Browse Source
This commit is contained in:
Ardeman 2025-03-19 17:53:27 +08:00
parent ba4e380023
commit abf7e829ba
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,9 @@
import { ArrowPathIcon } from '@heroicons/react/24/solid'
import { isRouteErrorResponse } from 'react-router' import { isRouteErrorResponse } from 'react-router'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getNews } from '~/apis/common/get-news' import { getNews } from '~/apis/common/get-news'
import { Card } from '~/components/ui/card'
import { NewsPage } from '~/pages/news' import { NewsPage } from '~/pages/news'
import type { Route } from './+types/_news._index' import type { Route } from './+types/_news._index'
@ -65,7 +67,14 @@ export const clientLoader = async ({
clientLoader.hydrate = true as const clientLoader.hydrate = true as const
export const HydrateFallback = () => { export const HydrateFallback = () => {
return <div>Loading...</div> return (
<Card>
<div className="flex h-96 items-center justify-center">
<ArrowPathIcon className="size-5 animate-spin" />{' '}
<span>Loading...</span>
</div>
</Card>
)
} }
export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => { export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {