reduced Framer Motion size

galacticcouncil · Jun 12, 2024 · d469109 · d469109
1 parent 46ee878
commit d469109
Show file tree

Hide file tree

Showing 31 changed files with 273 additions and 248 deletions.
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -6,7 +6,12 @@ import { SContainer, SContent } from "./Accordion.styled"
 import ChevronDownIcon from "assets/icons/ChevronDown.svg?react"
 import { ButtonTransparent } from "components/Button/Button"
 import { FC, ReactNode, useState } from "react"
-import { AnimatePresence, motion } from "framer-motion"
+import {
+  AnimatePresence,
+  LazyMotion,
+  domAnimation,
+  m as motion,
+} from "framer-motion"
 
 type AccordionProps = {
   title: string
@@ -61,19 +66,21 @@ export const Accordion: FC<AccordionProps> = ({
         </div>
       </div>
 
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ height: 0 }}
-            animate={{ height: "auto" }}
-            exit={{ height: 0 }}
-            transition={{ duration: 0.3, ease: "easeInOut" }}
-            css={{ overflow: "hidden" }}
-          >
-            <SContent columns={columns}>{children}</SContent>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <LazyMotion features={domAnimation}>
+        <AnimatePresence>
+          {expanded && (
+            <motion.div
+              initial={{ height: 0 }}
+              animate={{ height: "auto" }}
+              exit={{ height: 0 }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+              css={{ overflow: "hidden" }}
+            >
+              <SContent columns={columns}>{children}</SContent>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
     </SContainer>
   )
 }
diff --git a/src/components/Layout/Header/HeaderDropdown/HeaderDropdown.styled.tsx b/src/components/Layout/Header/HeaderDropdown/HeaderDropdown.styled.tsx
@@ -2,7 +2,7 @@ import { css } from "@emotion/react"
 import styled from "@emotion/styled"
 import { Link } from "@tanstack/react-location"
 import { ButtonTransparent } from "components/Button/Button"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const SContent = styled(motion.div)`

diff --git a/src/components/Layout/Header/HeaderDropdown/HeaderDropdown.tsx b/src/components/Layout/Header/HeaderDropdown/HeaderDropdown.tsx
@@ -1,6 +1,6 @@
 import { Content, Portal } from "@radix-ui/react-dropdown-menu"
 import { SContent } from "components/Layout/Header/HeaderDropdown/HeaderDropdown.styled"
-import { AnimatePresence } from "framer-motion"
+import { AnimatePresence, LazyMotion, domAnimation } from "framer-motion"
 import { ReactNode } from "react"
 
 export type HeaderDropdownProps = {
@@ -15,32 +15,34 @@ export const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
   className,
 }) => {
   return (
-    <AnimatePresence>
-      {open && (
-        <Portal forceMount>
-          <Content
-            align="end"
-            sideOffset={18}
-            css={{ zIndex: 5 }}
-            className={className}
-          >
-            <SContent
-              initial={{ opacity: 0, height: 50, x: 200 }}
-              animate={{ opacity: 1, height: "auto", x: 0 }}
-              exit={{ opacity: 0, height: 50, x: 200, pointerEvents: "none" }}
-              transition={{
-                type: "spring",
-                mass: 1,
-                stiffness: 300,
-                damping: 20,
-                duration: 0.2,
-              }}
+    <LazyMotion features={domAnimation}>
+      <AnimatePresence>
+        {open && (
+          <Portal forceMount>
+            <Content
+              align="end"
+              sideOffset={18}
+              css={{ zIndex: 5 }}
+              className={className}
             >
-              {children}
-            </SContent>
-          </Content>
-        </Portal>
-      )}
-    </AnimatePresence>
+              <SContent
+                initial={{ opacity: 0, height: 50, x: 200 }}
+                animate={{ opacity: 1, height: "auto", x: 0 }}
+                exit={{ opacity: 0, height: 50, x: 200, pointerEvents: "none" }}
+                transition={{
+                  type: "spring",
+                  mass: 1,
+                  stiffness: 300,
+                  damping: 20,
+                  duration: 0.2,
+                }}
+              >
+                {children}
+              </SContent>
+            </Content>
+          </Portal>
+        )}
+      </AnimatePresence>
+    </LazyMotion>
   )
 }
diff --git a/src/components/Layout/Header/MobileNavBar/TabMenuModal/TabMenuModal.styled.ts b/src/components/Layout/Header/MobileNavBar/TabMenuModal/TabMenuModal.styled.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled"
 import { IconButton } from "components/IconButton/IconButton"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const SModalContent = styled(motion.div)`

diff --git a/src/components/Layout/Header/MobileNavBar/TabMenuModal/TabMenuModal.tsx b/src/components/Layout/Header/MobileNavBar/TabMenuModal/TabMenuModal.tsx
@@ -4,7 +4,7 @@ import { RemoveScroll } from "react-remove-scroll"
 import CrossIcon from "assets/icons/CrossIcon.svg?react"
 import { CloseButton, SModalContent, SBackdrop } from "./TabMenuModal.styled"
 import { useTranslation } from "react-i18next"
-import { AnimatePresence } from "framer-motion"
+import { AnimatePresence, LazyMotion, domAnimation } from "framer-motion"
 
 type TabMenuModalProps = {
   open: boolean
@@ -19,38 +19,40 @@ export const TabMenuModal = ({
   const { t } = useTranslation()
   return (
     <Dialog open={open}>
-      <AnimatePresence mode="wait">
-        {open && (
-          <DialogPortal forceMount>
-            <SBackdrop
-              key="backdrop"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-            >
-              <DialogContent onInteractOutside={onClose} asChild>
-                <SModalContent
-                  key="content"
-                  initial={{ opacity: 0, x: 200 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  exit={{ opacity: 0, x: 200 }}
-                  transition={{
-                    duration: 0.2,
-                  }}
-                >
-                  <CloseButton
-                    icon={<CrossIcon />}
-                    onClick={onClose}
-                    name={t("modal.closeButton.name")}
-                  />
-                  <RemoveScroll enabled={open}>{children}</RemoveScroll>
-                </SModalContent>
-              </DialogContent>
-            </SBackdrop>
-          </DialogPortal>
-        )}
-      </AnimatePresence>
+      <LazyMotion features={domAnimation}>
+        <AnimatePresence mode="wait">
+          {open && (
+            <DialogPortal forceMount>
+              <SBackdrop
+                key="backdrop"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <DialogContent onInteractOutside={onClose} asChild>
+                  <SModalContent
+                    key="content"
+                    initial={{ opacity: 0, x: 200 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 200 }}
+                    transition={{
+                      duration: 0.2,
+                    }}
+                  >
+                    <CloseButton
+                      icon={<CrossIcon />}
+                      onClick={onClose}
+                      name={t("modal.closeButton.name")}
+                    />
+                    <RemoveScroll enabled={open}>{children}</RemoveScroll>
+                  </SModalContent>
+                </DialogContent>
+              </SBackdrop>
+            </DialogPortal>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
     </Dialog>
   )
 }
diff --git a/src/components/Layout/Header/toolbar/buttons/Bell.tsx b/src/components/Layout/Header/toolbar/buttons/Bell.tsx
@@ -7,7 +7,7 @@ import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"
 import { useToast } from "state/toasts"
 import { useTranslation } from "react-i18next"
 import { useReferendums } from "api/democracy"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import {
   SToolbarButton,
   SToolbarIcon,

diff --git a/src/components/Layout/Header/toolbar/buttons/Settings.styled.ts b/src/components/Layout/Header/toolbar/buttons/Settings.styled.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled"
 import { ButtonTransparent } from "components/Button/Button"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const SHeader = styled.div`

diff --git a/src/components/Modal/contents/ModalContents.styled.ts b/src/components/Modal/contents/ModalContents.styled.ts
@@ -1,6 +1,6 @@
 import { css } from "@emotion/react"
 import styled from "@emotion/styled"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const SContainer = styled.div<{ animating: boolean }>`

diff --git a/src/components/Modal/contents/ModalContents.tsx b/src/components/Modal/contents/ModalContents.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence } from "framer-motion"
+import { AnimatePresence, LazyMotion, domAnimation } from "framer-motion"
 import { ReactNode, useState } from "react"
 import { useMeasure } from "react-use"
 import {
@@ -118,13 +118,15 @@ const Wrapper = ({
   return disableAnimation ? (
     <>{children}</>
   ) : (
-    <AnimatePresence
-      mode="popLayout"
-      initial={false}
-      custom={{ direction, height }}
-    >
-      {children}
-    </AnimatePresence>
+    <LazyMotion features={domAnimation}>
+      <AnimatePresence
+        mode="popLayout"
+        initial={false}
+        custom={{ direction, height }}
+      >
+        {children}
+      </AnimatePresence>
+    </LazyMotion>
   )
 }
 

diff --git a/src/components/Modal/header/ModalHeader.styled.ts b/src/components/Modal/header/ModalHeader.styled.ts
@@ -2,7 +2,7 @@ import { css } from "@emotion/react"
 import styled from "@emotion/styled"
 import { IconButton } from "components/IconButton/IconButton"
 import { GradientText } from "components/Typography/GradientText/GradientText"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 import { ModalHeaderVariant } from "./ModalHeader"
 

diff --git a/src/components/PillSwitch/PillSwitch.styled.ts b/src/components/PillSwitch/PillSwitch.styled.ts
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const SSwitch = styled.div`

diff --git a/src/components/Toast/Toast.styled.ts b/src/components/Toast/Toast.styled.ts
@@ -1,7 +1,7 @@
 import { Close, Root, Title } from "@radix-ui/react-toast"
 import styled from "@emotion/styled"
 import { theme } from "theme"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { Maybe } from "utils/helpers"
 import { css, SerializedStyles } from "@emotion/react"
 import { ToastVariant } from "state/toasts"

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -11,7 +11,7 @@ import CrossIcon from "assets/icons/CrossIcon.svg?react"
 import { Text } from "components/Typography/Text/Text"
 import { TOAST_CLOSE_TIME } from "utils/constants"
 import { ToastContent } from "./ToastContent"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { ToastVariant } from "state/toasts"
 
 type Props = {

diff --git a/src/components/Toast/ToastProvider.tsx b/src/components/Toast/ToastProvider.tsx
@@ -3,7 +3,7 @@ import { ToastViewport } from "components/Toast/ToastViewport"
 import { Provider } from "@radix-ui/react-toast"
 import { useToast } from "state/toasts"
 import { Toast } from "components/Toast/Toast"
-import { AnimatePresence } from "framer-motion"
+import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion"
 
 import { ToastSidebar } from "./sidebar/ToastSidebar"
 import { useBridgeToast } from "./Toast.utils"
@@ -46,24 +46,26 @@ export const ToastProvider: FC<PropsWithChildren> = ({ children }) => {
     <>
       <Provider duration={0}>
         <ToastViewport />
-        <AnimatePresence>
-          {!sidebar && toast && (
-            <Toast
-              index={1 + toastSeenInGroupCount}
-              link={toast.link}
-              count={activeToasts.length + toastSeenInGroupCount}
-              key={toast.id}
-              variant={toast.variant}
-              title={toast.title}
-              actions={toast.actions}
-              onClick={() => setSidebar(true)}
-              onClose={() => hide(toast.id)}
-              persist={toast.persist}
-              dateCreated={new Date(toast.dateCreated)}
-              hideTime={toast.hideTime}
-            />
-          )}
-        </AnimatePresence>
+        <LazyMotion features={domAnimation}>
+          <AnimatePresence>
+            {!sidebar && toast && (
+              <Toast
+                index={1 + toastSeenInGroupCount}
+                link={toast.link}
+                count={activeToasts.length + toastSeenInGroupCount}
+                key={toast.id}
+                variant={toast.variant}
+                title={toast.title}
+                actions={toast.actions}
+                onClick={() => setSidebar(true)}
+                onClose={() => hide(toast.id)}
+                persist={toast.persist}
+                dateCreated={new Date(toast.dateCreated)}
+                hideTime={toast.hideTime}
+              />
+            )}
+          </AnimatePresence>
+        </LazyMotion>
       </Provider>
       {children}
       <ToastSidebar />

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -7,6 +7,7 @@ import { Suspense, lazy } from "react"
 import { ReferralsSkeleton } from "sections/referrals/ReferralsSkeleton"
 import { StatsAssetPageSkeleton } from "sections/stats/skeleton/StatsAssetPageSkeleton"
 import { StatsPageSkeleton } from "sections/stats/skeleton/StatsPageSkeleton"
+import { BondsPageSkeleton } from "sections/trade/sections/bonds/BondsPageSkeleton"
 import { SwapAppSkeleton } from "sections/trade/skeleton/SwapAppSkeleton"
 import { SwapPageSkeleton } from "sections/trade/skeleton/SwapPageSkeleton"
 
@@ -162,14 +163,7 @@ export const routes: Route[] = [
       {
         path: "bonds",
         element: (
-          <Suspense
-            fallback={
-              <div sx={{ flex: "column", gap: 40 }}>
-                <TableSkeleton rowCount={3} />
-                <TableSkeleton />
-              </div>
-            }
-          >
+          <Suspense fallback={<BondsPageSkeleton />}>
             <BondsPageWrapper />
           </Suspense>
         ),

diff --git a/src/sections/pools/farms/components/claimAllDropdown/ClaimAllDrowpdown.styled.ts b/src/sections/pools/farms/components/claimAllDropdown/ClaimAllDrowpdown.styled.ts
@@ -1,7 +1,7 @@
 import { css } from "@emotion/react"
 import styled from "@emotion/styled"
 import * as Popover from "@radix-ui/react-popover"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const STriggerButton = styled(Popover.Trigger)`

diff --git a/src/sections/pools/pool/Pool.styled.ts b/src/sections/pools/pool/Pool.styled.ts
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled"
-import { motion } from "framer-motion"
+import { m as motion } from "framer-motion"
 import { theme } from "theme"
 
 export const SPoolContainer = styled.div`