added loader

app/page.tsx

@@ -3,10 +3,11 @@
 import { Suspense } from 'react';
 import ThreeSceneClientWrapper from '@/components/three-scene-client-wrapper';
 import { ConfirmationProvider } from '@/providers/confirmation-provider';
+import Loader from '@/components/loading';
 
 export default function Page() {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<Loader />}>
       <ConfirmationProvider>
         <ThreeSceneClientWrapper />
       </ConfirmationProvider>

components/loading.tsx

@@ -1,9 +1,21 @@
-'use client';
+import React from 'react';
+import Image from 'next/image';
 
-export default async function Loading() {
+const GifLoader = () => {
   return (
-    <main className="p-4 md:p-10 mx-auto max-w-7xl">
-      <span>Loading..........</span>
-    </main>
+    <div className="flex flex-col justify-center items-center h-screen">
+      <Image
+        src="/xno_currencies.gif"
+        alt="Loading..."
+        width={800}
+        height={262}
+        className="w-1/2 h-auto"
+      />
+      <div className="text-[30px] w-full text-center m-10">
+        Loading... Ӿ ...
+      </div>
+    </div>
   );
-}
+};
+
+export default GifLoader;