feat: add loading overlay to between navigations and to auth form events

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>
   )