BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move animation presence to app level rather than layout

Browse source
This commit is contained in:
3zachm 2022-12-24 15:35:35 -08:00
parent f78232f3c2
commit 968d93a1ba
3 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
layouts/DashLayout.tsx
View file

@ -18,7 +18,13 @@ function DashLayout(props: DashLayoutProps) {
// get the current route for animation purposes // get the current route for animation purposes
const router = useRouter(); const router = useRouter();
return ( return (
<> <m.div
className="bg-gradient-to-t from-zinc-900 to-[#202737b6]"
initial="initial"
animate="animate"
exit="exit"
variants={containerVariants}
>
<Head> <Head>
<title>Dashboard - InvestBot</title> <title>Dashboard - InvestBot</title>
<meta name="description" content="Dashboard statistics for InvestBot" /> <meta name="description" content="Dashboard statistics for InvestBot" />
@ -57,7 +63,7 @@ function DashLayout(props: DashLayoutProps) {
</AnimatePresence> </AnimatePresence>
</LazyMotion> </LazyMotion>
</div> </div>
</> </m.div>
); );
} }

9
layouts/HomeLayout.tsx
View file

@ -23,7 +23,12 @@ function HomeLayout(props: HomeLayoutProps) {
// get the current route for animation purposes // get the current route for animation purposes
const router = useRouter(); const router = useRouter();
return ( return (
<> <m.div
initial="initial"
animate="animate"
exit="exit"
variants={containerVariants}
>
<Head> <Head>
<title>InvestBot</title> <title>InvestBot</title>
<meta name="description" content="Serving anny's community est. 2022" /> <meta name="description" content="Serving anny's community est. 2022" />
@ -59,7 +64,7 @@ function HomeLayout(props: HomeLayoutProps) {
</m.div> </m.div>
</AnimatePresence> </AnimatePresence>
</LazyMotion> </LazyMotion>
</> </m.div>
); );
} }

9
pages/_app.tsx
View file

@ -2,6 +2,7 @@ import "../styles/globals.css";
import type { ReactElement, ReactNode } from "react"; import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next"; import type { NextPage } from "next";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion";
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode; getLayout?: (page: ReactElement) => ReactNode;
@ -15,5 +16,11 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available // Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page); const getLayout = Component.getLayout ?? ((page) => page);
return getLayout(<Component {...pageProps} />); return (
<LazyMotion features={domAnimation}>
<AnimatePresence mode="wait" initial={false}>
{getLayout(<Component {...pageProps} />)}
</AnimatePresence>
</LazyMotion>
);
} }