add loading page

src/components/LoadingView.tsx

@@ -0,0 +1,34 @@
+interface IProps {
+	title?: string;
+	description?: string;
+}
+
+const LoadingView = ({ title, description }: IProps) => {
+	return (
+		<div className="flex min-h-[calc(100vh-194px)] flex-col items-center justify-center p-6 bg-base-100">
+			<div className="relative flex max-w-sm flex-col items-center text-center">
+				{/* Animated Custom Loader */}
+				<div className="relative mb-6 flex h-16 w-16 items-center justify-center">
+					{/* Outer Pulsing Ring */}
+					<div className="absolute inset-0 animate-ping rounded-full bg-(--accent) opacity-20 [animation-duration:1.5s]"></div>
+
+					{/* Inner Spinning Ring */}
+					<div className="h-12 w-12 animate-spin rounded-full border-4 border-(--accent) border-t-transparent"></div>
+				</div>
+
+				{/* Loading Content */}
+				<h2 className="text-xl font-bold tracking-tight mb-2 text-(--base-content)">
+					{title || "Loading Data"}
+				</h2>
+				<p className="text-sm text-(--neutral-content) max-w-xs">
+					{description || "Please wait a moment while we load the data."}
+				</p>
+
+				{/* Decorative background glow matching your layout */}
+				<div className="absolute -inset-10 -z-10 bg-(--accent)/5 blur-2xl rounded-full pointer-events-none" />
+			</div>
+		</div>
+	);
+};
+
+export default LoadingView;