From 696cd44ba1f657283d05cfeeaa78b9e2dd58fa28 Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Fri, 10 Feb 2023 09:24:01 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Lazy=20load=20animation=20?= =?UTF-8?q?library=20to=20help=20reduce=20bundle=20size=20(#502)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/admin-control.tsx | 10 ++-- src/components/cookie-consent.tsx | 6 +-- src/components/home/hero.tsx | 12 ++--- src/components/layouts/page-layout.tsx | 51 ++++++++++--------- src/components/layouts/standard-layout.tsx | 35 ++++++++++--- src/components/modal/modal.tsx | 12 ++--- src/components/poll/desktop-poll.tsx | 10 ++-- .../desktop-poll/controlled-scroll-area.tsx | 6 +-- src/components/poll/mobile-poll.tsx | 8 +-- .../poll/mobile-poll/poll-option.tsx | 18 +++---- src/components/poll/score-summary.tsx | 6 +-- src/components/profile/user-details.tsx | 4 +- src/components/tooltip.tsx | 6 +-- src/pages/_app.tsx | 14 ++++- 14 files changed, 115 insertions(+), 83 deletions(-) diff --git a/src/components/admin-control.tsx b/src/components/admin-control.tsx index b3769a0bf..434759ec5 100644 --- a/src/components/admin-control.tsx +++ b/src/components/admin-control.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import { useRouter } from "next/router"; import { useTranslation } from "next-i18next"; import posthog from "posthog-js"; @@ -97,7 +97,7 @@ export const AdminControls = (props: { children?: React.ReactNode }) => { {isSharingVisible ? ( - { setIsSharingVisible(false); }} /> - + ) : null} - + {poll.verified === false ? : null} {props.children} - + ); }; diff --git a/src/components/cookie-consent.tsx b/src/components/cookie-consent.tsx index 1bfc2f860..cfc2f4079 100644 --- a/src/components/cookie-consent.tsx +++ b/src/components/cookie-consent.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import Cookies from "js-cookie"; import Link from "next/link"; import * as React from "react"; @@ -14,7 +14,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => { return ReactDOM.createPortal( {visible ? ( - { OK - + ) : null} , getPortal(), diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx index 283797662..68f1ca2df 100644 --- a/src/components/home/hero.tsx +++ b/src/components/home/hero.tsx @@ -1,5 +1,5 @@ /* eslint-disable @next/next/no-html-link-for-pages */ -import { motion } from "framer-motion"; +import { m } from "framer-motion"; import { Trans, useTranslation } from "next-i18next"; import * as React from "react"; @@ -46,13 +46,13 @@ const Hero: React.VoidFunctionComponent = () => {
- - { > {t("perfect")} 🤩 - - + - +
diff --git a/src/components/layouts/page-layout.tsx b/src/components/layouts/page-layout.tsx index 20e73d2a9..99e99c166 100644 --- a/src/components/layouts/page-layout.tsx +++ b/src/components/layouts/page-layout.tsx @@ -1,4 +1,5 @@ import clsx from "clsx"; +import { domAnimation, LazyMotion } from "framer-motion"; import Link from "next/link"; import { useRouter } from "next/router"; import { Trans, useTranslation } from "next-i18next"; @@ -62,33 +63,35 @@ const PageLayout: React.VoidFunctionComponent = ({ }) => { const { t } = useTranslation("homepage"); return ( -
-
-
-
- - - - - }} /> - + +
+
+
+
+ + + + + }} /> + +
+ + + + + + + + +
- - - - - - - - - +
{children}
+
-
{children}
-
-
+ ); }; diff --git a/src/components/layouts/standard-layout.tsx b/src/components/layouts/standard-layout.tsx index c3039b24a..ada751d82 100644 --- a/src/components/layouts/standard-layout.tsx +++ b/src/components/layouts/standard-layout.tsx @@ -1,23 +1,42 @@ +import { AnimatePresence, domAnimation, LazyMotion, m } from "framer-motion"; +import { useRouter } from "next/router"; import React from "react"; import { DayjsProvider } from "@/utils/dayjs"; import { NextPageWithLayout } from "../../types"; +import ModalProvider from "../modal/modal-provider"; import { UserProvider } from "../user-provider"; import { MobileNavigation } from "./standard-layout/mobile-navigation"; const StandardLayout: React.VoidFunctionComponent<{ children?: React.ReactNode; }> = ({ children, ...rest }) => { + const router = useRouter(); return ( - - -
- -
{children}
-
- - + + + + +
+ +
+ + + {children} + + +
+
+ + + + ); }; diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index f19f87624..60dec557d 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -1,5 +1,5 @@ import { Dialog } from "@headlessui/react"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import * as React from "react"; import X from "@/components/icons/x.svg"; @@ -47,19 +47,19 @@ const Modal: React.VoidFunctionComponent = ({ if (overlayClosable) onCancel?.(); }} > - - = ({
) : null}
- - + + ) : null} diff --git a/src/components/poll/desktop-poll.tsx b/src/components/poll/desktop-poll.tsx index 2b2c29c83..3c5092662 100644 --- a/src/components/poll/desktop-poll.tsx +++ b/src/components/poll/desktop-poll.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import { Trans, useTranslation } from "next-i18next"; import * as React from "react"; import { useMeasure } from "react-use"; @@ -191,7 +191,7 @@ const Poll: React.VoidFunctionComponent = () => { {shouldShowNewParticipantForm && !poll.closed && !editingParticipantId ? ( - { }); }} /> - + ) : null} {participants.map((participant, i) => { @@ -247,7 +247,7 @@ const Poll: React.VoidFunctionComponent = () => {
{shouldShowNewParticipantForm || editingParticipantId ? ( - { {shouldShowNewParticipantForm ? t("continue") : t("save")} - + ) : null} diff --git a/src/components/poll/desktop-poll/controlled-scroll-area.tsx b/src/components/poll/desktop-poll/controlled-scroll-area.tsx index 4e9e3c7d9..23ffa3582 100644 --- a/src/components/poll/desktop-poll/controlled-scroll-area.tsx +++ b/src/components/poll/desktop-poll/controlled-scroll-area.tsx @@ -1,5 +1,5 @@ import clsx from "clsx"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import React from "react"; import { usePollContext } from "./poll-context"; @@ -16,7 +16,7 @@ const ControlledScrollArea: React.VoidFunctionComponent<{ style={{ width: availableSpace, maxWidth: availableSpace }} > - {children} - + ); diff --git a/src/components/poll/mobile-poll.tsx b/src/components/poll/mobile-poll.tsx index ae0113cc8..9bf1df9e8 100644 --- a/src/components/poll/mobile-poll.tsx +++ b/src/components/poll/mobile-poll.tsx @@ -1,5 +1,5 @@ import { Listbox } from "@headlessui/react"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import { useTranslation } from "next-i18next"; import * as React from "react"; import { FormProvider, useForm } from "react-hook-form"; @@ -131,7 +131,7 @@ const MobilePoll: React.VoidFunctionComponent = () => { { /> {isEditing ? ( - { {selectedParticipantId ? t("save") : t("continue")} - + ) : null} diff --git a/src/components/poll/mobile-poll/poll-option.tsx b/src/components/poll/mobile-poll/poll-option.tsx index 59d9a74ff..437de87f2 100644 --- a/src/components/poll/mobile-poll/poll-option.tsx +++ b/src/components/poll/mobile-poll/poll-option.tsx @@ -1,6 +1,6 @@ import { Participant, VoteType } from "@prisma/client"; import clsx from "clsx"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import { useTranslation } from "next-i18next"; import * as React from "react"; @@ -33,7 +33,7 @@ const CollapsibleContainer: React.VoidFunctionComponent<{ return ( {expanded ? ( - {children} - + ) : null} ); @@ -61,14 +61,14 @@ const PopInOut: React.VoidFunctionComponent<{ className?: string; }> = ({ children, className }) => { return ( - {children} - + ); }; @@ -83,7 +83,7 @@ const PollOptionVoteSummary: React.VoidFunctionComponent<{ optionId: string }> = participantsWhoVotedYes.length + participantsWhoVotedIfNeedBe.length === 0; return ( - = )} - + ); }; @@ -228,7 +228,7 @@ const PollOption: React.VoidFunctionComponent = ({
{children}
{editable ? null : ( - e.stopPropagation()} @@ -249,7 +249,7 @@ const PollOption: React.VoidFunctionComponent = ({ }, )} /> - + )}
diff --git a/src/components/poll/score-summary.tsx b/src/components/poll/score-summary.tsx index bf4b45a76..9cad6fc71 100644 --- a/src/components/poll/score-summary.tsx +++ b/src/components/poll/score-summary.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import * as React from "react"; import { usePrevious } from "react-use"; @@ -23,7 +23,7 @@ export const ScoreSummary: React.VoidFunctionComponent = > - = className="relative" > {score} - +
); diff --git a/src/components/profile/user-details.tsx b/src/components/profile/user-details.tsx index d9dab6db4..5c27ced18 100644 --- a/src/components/profile/user-details.tsx +++ b/src/components/profile/user-details.tsx @@ -1,4 +1,4 @@ -import { motion } from "framer-motion"; +import { m } from "framer-motion"; import { useTranslation } from "next-i18next"; import posthog from "posthog-js"; import * as React from "react"; @@ -16,7 +16,7 @@ export interface UserDetailsProps { email?: string; } -const MotionButton = motion(Button); +const MotionButton = m(Button); export const UserDetails: React.VoidFunctionComponent = ({ userId, diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx index 0ed21c155..75c080d2f 100644 --- a/src/components/tooltip.tsx +++ b/src/components/tooltip.tsx @@ -12,7 +12,7 @@ import { useRole, } from "@floating-ui/react-dom-interactions"; import clsx from "clsx"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, m } from "framer-motion"; import * as React from "react"; import { preventWidows } from "@/utils/prevent-widows"; @@ -104,7 +104,7 @@ const Tooltip: React.VoidFunctionComponent = ({ {open ? ( - = ({ }} /> {typeof content === "string" ? preventWidows(content) : content} - + ) : null} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 191040a2b..0560fa6b1 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,6 +4,7 @@ import "~/style.css"; import { Inter, Noto_Sans_Mono } from "@next/font/google"; import { inject } from "@vercel/analytics"; +import { domAnimation, LazyMotion, m } from "framer-motion"; import { NextPage } from "next"; import { AppProps } from "next/app"; import Head from "next/head"; @@ -15,7 +16,6 @@ import { Toaster } from "react-hot-toast"; import Maintenance from "@/components/maintenance"; import { useCrispChat } from "../components/crisp-chat"; -import ModalProvider from "../components/modal/modal-provider"; import { NextPageWithLayout } from "../types"; import { absoluteUrl } from "../utils/absolute-url"; import { UserSession } from "../utils/auth"; @@ -89,7 +89,17 @@ const MyApp: NextPage = ({ Component, pageProps }) => { --font-noto: ${noto.style.fontFamily}; } `} - {getLayout()} + + {getLayout( + + + , + )} + ); };