infra/site
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: add better loading and 404 page #20

Merged
palid merged 1 commit from feat/cutenimations into main 2025-02-14 23:33:49 +00:00
Conversation 0 Commits 1 Files changed 2 +18 -2
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/[locale]/loading.tsx
View file

@ -5,7 +5,7 @@ import Image from "next/image"
export default function Loading() {
return (
<div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
<div className="relative h-16 w-16 animate-spin">
<div className="relative h-full w-full max-w-[50vw] max-h-[50vh] motion-reduce:animate-bounce motion-safe:animate-spin">
<Image src="/web-app-manifest-512x512.png" alt="Loading..." fill className="object-contain" priority />
</div>
</div>

18
src/app/[locale]/not-found.tsx
View file

@ -1,5 +1,21 @@
"use client"
import { jgs7 } from "@/fonts"
import Image from "next/image"
export default function NotFound() {
return <div>Not Found</div>
return (
<div>
<div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm flex-col">
<section className={`text-6xl flex flex-col text-center`}>
<span className={`${jgs7.className} text-8xl`}>404</span>
<span>Page not found</span>
</section>
<div className="fixed h-full w-full max-w-[50vw] max-h-[50vh] motion-safe:animate-ping ">
<Image src="/web-app-manifest-512x512.png" alt="Loading..." fill className="object-contain" priority />
</div>
</div>
</div>
)
}