Reduce bundlesize by lazy loading framer-motion (#9)

Reduce bundlesize by lazy loading framer-motion

package.json

@@ -17,6 +17,7 @@
     "prod:api:logs": "npx wrangler pages deployment tail",
     "prod:deploy": "npx wrangler pages publish functions --project-name=memo-card",
     "dev:botfather:description": "export $(cat .dev.vars) && node botfather/update.js",
+    "bundle-visualize": "npx vite-bundle-visualizer",
     "export-public-code": "[[ $(git symbolic-ref --short HEAD 2>/dev/null) == \"main\" ]] && npm run __export-public-code || echo \"Current branch is not 'main'\"",
     "__export-public-code": "npx betterplace-gitexporter gitexporter.config.json && cd ../memocard-public && git checkout -b main && git remote add origin [email protected]:kubk/memo-card.git && git push",
     "generate-db-types": "docker info > /dev/null 2>&1 && export $(cat .dev.vars | xargs) && npx supabase gen types typescript --db-url $DB_URL >./functions/db/databaseTypes.ts"
@@ -77,6 +78,7 @@
     "prettier": "^3.0.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
+    "vite-bundle-visualizer": "^1.0.1",
     "vitest": "^0.34.6",
     "wrangler": "^3.10.1"
   }

src/lib/animations/tap-scale.ts

@@ -0,0 +1,7 @@
+export const tapScale = {
+  ":active": {
+    transform: "scale(0.98)",
+    transition: "transform 0.3s",
+    transformOrigin: "center center",
+  },
+};

src/lib/framer-motion/features.ts

@@ -0,0 +1 @@
+export { domAnimation } from "framer-motion";

src/lib/framer-motion/lazy-load-framer-motion.tsx

@@ -0,0 +1,20 @@
+import { LazyMotion } from "framer-motion";
+import { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+const loadFeatures = () => {
+  return import("./features.ts").then((res) => res.domAnimation);
+};
+
+export const LazyLoadFramerMotion = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
+};

src/screens/deck-form/card-list.tsx

@@ -11,9 +11,8 @@ import React from "react";
 import { reset } from "../../ui/reset.ts";
 import { t } from "../../translations/t.ts";
 import { Screen } from "../shared/screen.tsx";
-import { motion } from "framer-motion";
-import { whileTap } from "../../ui/animations.ts";
 import { removeAllTags } from "../../lib/sanitize-html/remove-all-tags.ts";
+import { tapScale } from "../../lib/animations/tap-scale.ts";
 
 export const CardList = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -85,8 +84,7 @@ export const CardList = observer(() => {
         </>
       )}
       {deckFormStore.filteredCards.map((cardForm, i) => (
-        <motion.div
-          whileTap={whileTap}
+        <div
           onClick={() => {
             deckFormStore.editCardFormById(cardForm.id);
           }}
@@ -99,13 +97,14 @@ export const CardList = observer(() => {
             // If the card content is too big then hide it
             maxHeight: 120,
             overflow: 'hidden',
+            ...tapScale,
           })}
         >
           <div>{removeAllTags(cardForm.front.value)}</div>
           <div className={css({ color: theme.hintColor })}>
             {removeAllTags(cardForm.back.value)}
           </div>
-        </motion.div>
+        </div>
       ))}
       <Button
         onClick={() => {

src/screens/deck-review/deck-finished-modal.tsx

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
+import { LazyLoadFramerMotion } from "../../lib/framer-motion/lazy-load-framer-motion.tsx";
 
 type Props = {
   children: ReactNode;
@@ -25,20 +26,22 @@ export const DeckFinishedModal = (props: Props) => {
   };
 
   return (
-    <motion.div
-      className={css({
-        maxWidth: 290,
-        margin: "0 auto",
-        padding: 24,
-        background: theme.secondaryBgColor,
-        borderRadius: theme.borderRadius,
-      })}
-      initial={"hidden"}
-      animate={"visible"}
-      exit={"hidden"}
-      variants={modal}
-    >
-      {children}
-    </motion.div>
+    <LazyLoadFramerMotion>
+      <m.div
+        className={css({
+          maxWidth: 290,
+          margin: "0 auto",
+          padding: 24,
+          background: theme.secondaryBgColor,
+          borderRadius: theme.borderRadius,
+        })}
+        initial={"hidden"}
+        animate={"visible"}
+        exit={"hidden"}
+        variants={modal}
+      >
+        {children}
+      </m.div>
+    </LazyLoadFramerMotion>
   );
 };

src/screens/deck-review/review-deck-name.tsx

@@ -2,31 +2,34 @@ import { useReviewStore } from "./store/review-store-context.tsx";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 import React from "react";
-import { AnimatePresence, motion } from "framer-motion";
+import { m, AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react-lite";
+import { LazyLoadFramerMotion } from "../../lib/framer-motion/lazy-load-framer-motion.tsx";
 
 export const ReviewDeckName = observer(() => {
   const reviewStore = useReviewStore();
 
   const deckName = reviewStore.currentCard?.deckName;
 
   return (
-    <AnimatePresence initial={false}>
-      <motion.div
-        key={deckName}
-        exit={{ y: 50, opacity: 0, position: "absolute" }}
-        animate={{ y: 0, opacity: 1 }}
-        initial={{ y: -50, opacity: 0 }}
-        className={css({
-          position: "absolute",
-          top: 41,
-          fontSize: 14,
-          whiteSpace: "nowrap",
-          color: theme.hintColor,
-        })}
-      >
-        {deckName}
-      </motion.div>
-    </AnimatePresence>
+    <LazyLoadFramerMotion>
+      <AnimatePresence initial={false}>
+        <m.div
+          key={deckName}
+          exit={{ y: 50, opacity: 0, position: "absolute" }}
+          animate={{ y: 0, opacity: 1 }}
+          initial={{ y: -50, opacity: 0 }}
+          className={css({
+            position: "absolute",
+            top: 41,
+            fontSize: 14,
+            whiteSpace: "nowrap",
+            color: theme.hintColor,
+          })}
+        >
+          {deckName}
+        </m.div>
+      </AnimatePresence>
+    </LazyLoadFramerMotion>
   );
 });

src/screens/deck-review/store/card-under-review-store.ts

@@ -67,13 +67,9 @@ export class CardUnderReviewStore {
     this.state = state;
   }
 
-  get isSpeakingCardsEnabledSettings() {
-    return userStore.isSpeakingCardsEnabled;
-  }
-
   speak() {
     if (
-      !this.isSpeakingCardsEnabledSettings ||
+      !userStore.isSpeakingCardsEnabled ||
       !this.deckSpeakLocale ||
       !this.deckSpeakField
     ) {

src/screens/shared/card/card-speaker.tsx

@@ -5,6 +5,7 @@ import { theme } from "../../../ui/theme.tsx";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { LimitedCardUnderReviewStore } from "./card.tsx";
+import { userStore } from "../../../store/user-store.ts";
 
 type Props = {
   card: LimitedCardUnderReviewStore;
@@ -17,7 +18,7 @@ export const CardSpeaker = observer((props: Props) => {
     !isSpeechSynthesisSupported ||
     !card.isOpened ||
     type !== card.deckSpeakField ||
-    !card.isSpeakingCardsEnabledSettings
+    !userStore.isSpeakingCardsEnabled
   ) {
     return null;
   }

src/screens/shared/card/card.tsx

@@ -1,5 +1,4 @@
-import { motion } from "framer-motion";
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import React from "react";
 import { theme } from "../../../ui/theme.tsx";
 import { observer } from "mobx-react-lite";
@@ -15,7 +14,6 @@ export type LimitedCardUnderReviewStore = Pick<
   CardUnderReviewStore,
   | "isOpened"
   | "deckSpeakField"
-  | "isSpeakingCardsEnabledSettings"
   | "speak"
   | "front"
   | "back"
@@ -33,7 +31,7 @@ type Props = {
 
 export const Card = observer(({ card }: Props) => {
   return (
-    <motion.div
+    <div
       className={
         card.answerType === "remember"
           ? css({
@@ -49,13 +47,27 @@ export const Card = observer(({ card }: Props) => {
               display: "grid",
               placeItems: "center center",
               padding: 10,
-              background: theme.secondaryBgColorComputed,
+              background: theme.secondaryBgColor,
             })
           : css({
               color: theme.textColor,
             })
       }
     >
+      {false && (
+        <div
+          className={css({
+            position: "absolute",
+            top: 0,
+            right: 12,
+            transform: "scale(0.8)",
+            cursor: "pointer",
+          })}
+          onClick={() => {}}
+        >
+          <i className={cx("mdi mdi-dots-horizontal mdi-24px")} />
+        </div>
+      )}
       <span
         className={css({
           textAlign: "center",
@@ -117,6 +129,6 @@ export const Card = observer(({ card }: Props) => {
           </>
         ) : null}
       </span>
-    </motion.div>
+    </div>
   );
 });

src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx

@@ -2,10 +2,9 @@ import { observer } from "mobx-react-lite";
 import { css } from "@emotion/css";
 import { theme } from "../../../ui/theme.tsx";
 import React from "react";
-import { motion } from "framer-motion";
-import { whileTap } from "../../../ui/animations.ts";
 import { DeckCardDbTypeWithType } from "../../../store/deck-list-store.ts";
 import { CardsToReviewCount } from "./cards-to-review-count.tsx";
+import { tapScale } from "../../../lib/animations/tap-scale.ts";
 
 type Props = {
   item: {
@@ -20,8 +19,7 @@ export const DeckRowWithCardsToReview = observer((props: Props) => {
   const { item, onClick } = props;
 
   return (
-    <motion.div
-      whileTap={whileTap}
+    <div
       onClick={onClick}
       className={css({
         display: "flex",
@@ -32,6 +30,7 @@ export const DeckRowWithCardsToReview = observer((props: Props) => {
         borderRadius: theme.borderRadius,
         padding: 12,
         background: theme.secondaryBgColor,
+        ...tapScale,
       })}
     >
       <div
@@ -59,6 +58,6 @@ export const DeckRowWithCardsToReview = observer((props: Props) => {
           color={theme.success}
         />
       </div>
-    </motion.div>
+    </div>
   );
 });

src/screens/user-settings/store/user-settings-store.tsx

@@ -26,7 +26,6 @@ export class UserSettingsStore {
   }
 
   load() {
-    console.log("load", !!userStore.userInfo);
     when(() => !!userStore.userInfo).then(
       action(() => {
         assert(userStore.userInfo);

src/store/user-store.ts

@@ -12,6 +12,7 @@ export class UserStore {
   plans?: PlansForUser;
   isCardFormattingOn = new BooleanToggle(false);
   defaultCardType: CardAnswerType = "remember";
+  isSpeakingCardsMuted = new BooleanToggle(false);
 
   constructor() {
     makeAutoObservable(this, {}, { autoBind: true });
@@ -51,6 +52,9 @@ export class UserStore {
   }
 
   get isSpeakingCardsEnabled() {
+    if (this.isSpeakingCardsMuted.value) {
+      return false;
+    }
     return this.user?.is_speaking_card_enabled ?? false;
   }
 

src/ui/chevron-icon.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import React, { SVGProps } from "react";
 
 type Direction = "top" | "bottom";
@@ -19,7 +19,7 @@ type Props = Pick<SVGProps<SVGSVGElement>, "onClick" | "className"> & {
 export const ChevronIcon = (props: Props) => {
   const { direction, ...restProps } = props;
   return (
-    <motion.svg
+    <m.svg
       width="16"
       height="16"
       viewBox="0 0 16 16"
@@ -38,6 +38,6 @@ export const ChevronIcon = (props: Props) => {
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </motion.svg>
+    </m.svg>
   );
 };