From a5d2e9cf72322c3f58d852432665569f3c72d854 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Thu, 3 Jul 2025 18:51:33 +0330
Subject: [PATCH] feat: add loading overlay to between navigations and to auth
 form events

---
 src/app/loading.tsx                           | 10 +++++
 src/components/loading/LoadingOverlay.tsx     | 37 +++++++++++++++++++
 .../loading/animations/PingAnimation.tsx      | 16 ++++++++
 .../auth/components/AuthFormWrapper.tsx       |  6 ++-
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/app/loading.tsx
 create mode 100644 src/components/loading/LoadingOverlay.tsx
 create mode 100644 src/components/loading/animations/PingAnimation.tsx

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..49906a7
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,10 @@
+import LoadingOverlay from '@/components/loading/LoadingOverlay'
+import React from 'react'
+
+function Loading() {
+  return (
+    <LoadingOverlay />
+  )
+}
+
+export default Loading
\ No newline at end of file
diff --git a/src/components/loading/LoadingOverlay.tsx b/src/components/loading/LoadingOverlay.tsx
new file mode 100644
index 0000000..bf4a52e
--- /dev/null
+++ b/src/components/loading/LoadingOverlay.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import PingAnimation from './animations/PingAnimation';
+
+type Props = {
+  visible?: boolean;
+  bgOpacity?: number;
+  delay?: number;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+const LoadingOverlay = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    // Trigger fade-in after mount
+    const timeout = setTimeout(() => setLoaded(visible), 300);
+    return () => clearTimeout(timeout);
+  }, [visible]);
+
+  return (
+    <div
+      data-visible={visible}
+      data-loaded={loaded}
+      className={`absolute inset-0 flex items-center justify-center
+                 backdrop-blur-sm bg-background/${bgOpacity}
+                 opacity-0 transition-opacity duration-300 ease-in-out delay-${delay}
+                 data-[loaded=false]:-z-100
+                 data-[visible=true]:z-100
+                 data-[visible=true]:opacity-100`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default LoadingOverlay
\ No newline at end of file
diff --git a/src/components/loading/animations/PingAnimation.tsx b/src/components/loading/animations/PingAnimation.tsx
new file mode 100644
index 0000000..a25c5d1
--- /dev/null
+++ b/src/components/loading/animations/PingAnimation.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+type Props = object
+
+function PingAnimation({ }: Props) {
+    return (
+        <div className="relative w-16 h-16">
+            <div className="absolute inset-0 rounded-full border-4 border-foreground/30 animate-ping" />
+            <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-8 h-8 border-4 border-foreground border-t-transparent rounded-full animate-spin" />
+            </div>
+        </div>
+    )
+}
+
+export default PingAnimation
\ No newline at end of file
diff --git a/src/features/auth/components/AuthFormWrapper.tsx b/src/features/auth/components/AuthFormWrapper.tsx
index 4c9373a..33f6539 100644
--- a/src/features/auth/components/AuthFormWrapper.tsx
+++ b/src/features/auth/components/AuthFormWrapper.tsx
@@ -1,14 +1,16 @@
+import LoadingOverlay from '@/components/loading/LoadingOverlay';
 import React from 'react'
 
 type Props = {
   isPending: boolean
 } & Omit<React.FormHTMLAttributes<HTMLFormElement>, "id">;
 
-function AuthFormWrapper({ children, ...restProps }: Props) {
+function AuthFormWrapper({ children, isPending, ...restProps }: Props) {
   return (
     <form {...restProps} className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'>
-      <div className='h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
+      <div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
         {children}
+        <LoadingOverlay visible={isPending} />
       </div>
     </form>
   )