Improve async error handling, loading states, and UI stability across the application

src/app/error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <div className="flex min-h-screen items-center justify-center flex-col gap-4">
+      <h2 className="text-2xl font-bold">Something went wrong</h2>
+
+      <button
+        onClick={() => reset()}
+        className="px-4 py-2 rounded bg-black text-white"
+      >
+        Try Again
+      </button>
+    </div>
+  );
+}

src/app/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black"></div>
+    </div>
+  );
+}

src/components/loader.tsx

@@ -0,0 +1,7 @@
+    export default function Loader() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <div className="h-10 w-10 animate-spin rounded-full border-b-2 border-black"></div>
+    </div>
+  );
+}