feat: enhance loading component with Lottie animation and improve data handling

package-lock.json

@@ -8541,6 +8541,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.4.tgz",
       "integrity": "sha512-kBGxI+MIZGBf4wZhNCWwHkMcVP+kbpmrLWH/SkO0qCKc7D7eSPcxQbfpsmsCo8v2KCBYjuGSou+xTqK44D/jMg==",
+      "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.26.0",
         "lottie-web": "^5.1.3"

src/app/business/apply/page.tsx

@@ -48,7 +48,7 @@ export default function ApplyBusiness() {
       }
     }
 
-    const { error } = await supabase
+    const { data, error } = await supabase
       .from("business_application")
       .insert([
         {
@@ -66,7 +66,7 @@ export default function ApplyBusiness() {
       ])
       .select();
     setSucess(true);
-
+    // console.table(data);
     Swal.fire({
       icon: error == null ? "success" : "error",
       title: error == null ? "success" : "Error: " + error.code,

src/app/loading.tsx

@@ -1,22 +1,8 @@
+import { Loader } from "@/components/loading/loader";
 export default function Loading() {
   return (
-    <div className="container flex items-center justify-center h-screen">
-      <div className="text-center">
-        <svg
-          className="animate-spin h-12 w-12 text-gray-600 mx-auto mb-4"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291l-2.832 2.832A10.003 10.003 0 0112 22v-4a8.001 8.001 0 01-6-5.709z"
-          ></path>
-        </svg>
-        <p className="text-lg font-semibold text-gray-600">Loading data...</p>
-      </div>
+    <div>
+      <Loader />
     </div>
   );
 }

src/components/loading/loader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Lottie from "react-lottie";
 import * as loadingData from "./loading.json";
 
@@ -11,17 +13,17 @@ const loadingOption = {
 };
 
 interface LoaderProps {
-  isSuccess: boolean;
+  isSuccess?: boolean;
 }
 
 export function Loader(props: LoaderProps) {
   return (
-    <>
+    <div>
       {!props.isSuccess && (
         <div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-10 backdrop-blur-sm z-50">
           <Lottie options={loadingOption} height={200} width={200} />
         </div>
       )}
-    </>
+    </div>
   );
 }