sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 22:14:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-04 20:34:30 +07:00
parent 2ead19ec67
commit a007a649f0
4 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

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

4
src/app/business/apply/page.tsx
View File

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

20
src/app/loading.tsx
View File

@ -1,22 +1,8 @@
import { Loader } from "@/components/loading/loader";
export default function Loading() { export default function Loading() {
return ( return (
<div className="container flex items-center justify-center h-screen"> <div>
<div className="text-center"> <Loader />
<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> </div>
); );
} }

8
src/components/loading/loader.tsx
View File

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