From e11dcdf071ece004b00035545ed213dfb73789c8 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Sat, 15 Feb 2025 00:33:10 +0100
Subject: [PATCH] feat: add better loading and 404 page

---
 src/app/[locale]/loading.tsx   |  2 +-
 src/app/[locale]/not-found.tsx | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx
index 3d2cd5a..6235b8a 100644
--- a/src/app/[locale]/loading.tsx
+++ b/src/app/[locale]/loading.tsx
@@ -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>
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
index c363b3b..ad040e8 100644
--- a/src/app/[locale]/not-found.tsx
+++ b/src/app/[locale]/not-found.tsx
@@ -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>
+  )
 }
+