added layout transition and fixed loading spinner

Stephen-Gordon · Mar 15, 2024 · ef376c8 · ef376c8
1 parent 7251299
commit ef376c8
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 95 deletions.
diff --git a/src/app/@auth/layout.tsx b/src/app/@auth/layout.tsx
@@ -2,6 +2,7 @@
 import SheetLayout from '@/app/components/Layouts/SheetLayout';
 import { Metadata } from 'next';
 import * as React from 'react';
+import TransitionLayout from '../components/Layouts/TransitionLayout';
 
 export default function ComponentsLayout({
   children,
@@ -10,7 +11,9 @@ export default function ComponentsLayout({
 }) {
   return (
     <>
-      <SheetLayout>{children}</SheetLayout>
+      <SheetLayout>
+        <TransitionLayout>{children}</TransitionLayout>
+      </SheetLayout>
     </>
   );
 }
diff --git a/src/app/@auth/template.tsx b/src/app/@auth/template.tsx
@@ -0,0 +1,5 @@
+// File: template.js
+import React from 'react';
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
diff --git a/src/app/components/Layouts/TransitionLayout.tsx b/src/app/components/Layouts/TransitionLayout.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+const TransitionLayout = ({ children }) => (
+  <motion.div
+    initial={{ x: 300, opacity: 0 }}
+    animate={{ x: 0, opacity: 1 }}
+    exit={{ x: 300, opacity: 0 }}
+    transition={{
+      type: 'spring',
+      stiffness: 260,
+      damping: 20,
+    }}
+  >
+    {children}
+  </motion.div>
+);
+export default TransitionLayout;
diff --git a/src/app/components/Success/Success.tsx b/src/app/components/Success/Success.tsx
@@ -59,25 +59,26 @@ export default function Success({
         style={{ borderRadius: '40px', padding: '16px' }}
         className='bg-background inset fixed z-50 grid h-fit space-y-8 overflow-hidden rounded-t-[40px] border-t bg-opacity-100 '
       >
-        <div className='relative'>
-          <AnimatePresence>
-            {transactionStatus && (
-              <div key={'check-circle'} className='grid w-full justify-center '>
-                <CheckCircle2 size='64' color='#4ade80' />
+        <div className='relative w-full items-center justify-center'>
+          {transactionStatus && (
+            <div key={'check-circle'} className='grid w-full justify-center '>
+              <CheckCircle2 size='64' color='#4ade80' />
+            </div>
+          )}
+          {loading && (
+            <div key={'loader'} className='grid w-full justify-center '>
+              <div className='grid w-full justify-center '>
+                <Loader2
+                  size='64'
+                  className='animate-spin justify-self-center '
+                  color='white'
+                />
               </div>
-            )}
-            {loading && (
-              <div
-                key={'loader'}
-                className='grid w-full items-center justify-center '
-              >
-                <Loader2 size='64' className='animate-spin ' color='white' />
-                <p className='text-muted-foreground text-center text-sm'>
-                  Your payment is on the way
-                </p>
-              </div>
-            )}
-          </AnimatePresence>
+              <p className='text-muted-foreground text-center text-sm'>
+                Your payment is on the way
+              </p>
+            </div>
+          )}
         </div>
       </DrawerContent>
     </Drawer>

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
@@ -54,25 +54,15 @@ export default function Page() {
     <div id='render' className=''>
       <div className='absolute right-4 top-4'>
         <Link
-          /* onClick={() => {
+          /*   onClick={() => {
             dispatch(setSheet(true));
-          }} */
+          }}  */
           href={{
             pathname: '/menu',
             query: { isNavOpen: true },
           }}
         >
-          <Menu />
-        </Link>
-        <Link
-          /* onClick={() => {
-            dispatch(setSheet(true));
-          }} */
-          href={{
-            pathname: '/embedded-wallet',
-          }}
-        >
-          go
+          <Menu onClick={() => router.push(`/menu?isNavOpen=true`)} />
         </Link>
       </div>
       <div className='blurios'>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -33,35 +33,8 @@ import { ZeroDevProvider } from '@zerodev/privy';
 // privy
 import { PrivyProvider } from '@privy-io/react-auth';
 
-// !STARTERCONF Change these default meta
-// !STARTERCONF Look at @/constant/config to change them
-/* 
-
-export const metadata: Metadata = {
-  title: 'PWA with Next 13',
-  description: 'PWA application with Next 13',
-  generator: 'Next.js',
-  manifest: '/manifest.json',
-
-  keywords: ['nextjs', 'nextjs13', 'next13', 'pwa', 'next-pwa'],
-  themeColor: [{ media: '(prefers-color-scheme: dark)', color: '#fff' }],
-  authors: [
-    { name: 'Rajesh Prajapati' },
-    {
-      name: 'Rajesh Prajapati',
-      url: 'https://www.linkedin.com/in/raazeshp96/',
-    },
-  ],
-  viewport:
-    'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover',
-  icons: [
-    { rel: 'apple-touch-icon', url: 'icons/icon-128x128.png' },
-    { rel: 'icon', url: 'icons/icon-128x128.png' },
-  ],
-}; */
-
 import bgimage from '../../public/images/Rectangle.png';
-import { LayoutGroup } from 'framer-motion';
+import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { sepolia } from 'viem/chains';
 
 export default function RootLayout({
@@ -76,33 +49,11 @@ export default function RootLayout({
   drawer: React.ReactNode;
 }) {
   const queryClient = new QueryClient();
-
   const router = useRouter();
-  const pathname = usePathname();
-  /*   const loginState = useSelector((state: RootState) => state.login.value);
-
-  // Redirect to login if not authenticated
-  if (!loginState && pathname !== '/login') {
-    router.push('/login');
-    return null;
-  }
-  console.log(loginState);
-
-
- */
-  console.log('layout');
-  console.log(
-    'NEXT_PUBLIC_PRIVY_APP_ID',
-    process.env.NEXT_PUBLIC_PRIVY_APP_ID as string
-  );
 
   return (
     <html className='h-full overflow-auto font-sans'>
       <head>
-        {/* <meta
-          name='viewport'
-          content='width=device-width, initial-scale=1, maximum-scale=1'
-        /> */}
         <title>Payments, Stephen Gordon</title>
 
         <meta name='application-name' content='PWA App' />
@@ -187,11 +138,16 @@ export default function RootLayout({
                 <PersistGate loading={null} persistor={persistor}>
                   <WagmiProvider config={config!}>
                     <QueryClientProvider client={queryClient}>
-                      <LayoutGroup>
-                        <div>{auth}</div>
-                        <div>{drawer}</div>
-                        {/*   <div>{transactionmodal}</div> */}
-                        {/* <div className=' absolute -z-50 flex h-1/2 w-1/2  justify-center '>
+                      <AnimatePresence
+                        mode='wait'
+                        initial={false}
+                        onExitComplete={() => window.scrollTo(0, 0)}
+                      >
+                        <LayoutGroup>
+                          <div>{auth}</div>
+                          <div>{drawer}</div>
+                          {/*   <div>{transactionmodal}</div> */}
+                          {/* <div className=' absolute -z-50 flex h-1/2 w-1/2  justify-center '>
                     <div
                       style={{
                         backgroundImage: `url(${bgimage.src})`,
@@ -201,16 +157,17 @@ export default function RootLayout({
                       }}
                     ></div>
                   </div> */}
-                        <main
-                          /*  style={{
+                          <main
+                            /*  style={{
                             backgroundColor: 'rgba(16, 16, 18, 1)',
                           }} */
-                          vaul-drawer-wrapper=''
-                          className='min-h-[100vh] text-gray-300'
-                        >
-                          {children}
-                        </main>
-                      </LayoutGroup>
+                            vaul-drawer-wrapper=''
+                            className='min-h-[100vh] text-gray-300'
+                          >
+                            {children}
+                          </main>
+                        </LayoutGroup>
+                      </AnimatePresence>
                     </QueryClientProvider>
                   </WagmiProvider>
                 </PersistGate>