plugin: reduce bundle size impact of framer-motion

By only loading a subset of animations into the compiled bundle.

Author: jamiebrynes7

package-lock.json

@@ -16,7 +16,7 @@
     "@internationalized/date": "3.10.0",
     "camelize-ts": "3.0.0",
     "classnames": "2.5.1",
-    "framer-motion": "12.23.25",
+    "motion": "12.23.26",
     "obsidian": "1.7.2",
     "react": "19.2.1",
     "react-aria-components": "1.13.0",
@@ -47,4 +47,4 @@
   "overrides": {
     "rollup": "4.44.2"
   }
-}
+}

plugin/package.json

@@ -1,3 +1,4 @@
+import { domAnimation, LazyMotion } from "motion/react";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 
@@ -87,7 +88,7 @@ export const QueryRoot: React.FC<Props> = ({ query, warnings }) => {
   }, [query, settings, refresh]);
 
   return (
-    <>
+    <LazyMotion features={domAnimation}>
       <QueryHeader
         title={getTitle(query, result)}
         isFetching={isFetching}
@@ -96,7 +97,7 @@ export const QueryRoot: React.FC<Props> = ({ query, warnings }) => {
       />
       <QueryWarnings warnings={warnings} />
       {hasFetchedOnce && <QueryResponseHandler result={result} query={query} />}
-    </>
+    </LazyMotion>
   );
 };
 

plugin/src/ui/query/QueryRoot.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import * as motion from "motion/react-m";
 import { Notice } from "obsidian";
 import React, { type MouseEvent } from "react";
 import { Checkbox } from "react-aria-components";

plugin/src/ui/query/task/Task.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence } from "framer-motion";
+import { AnimatePresence } from "motion/react";
 import type React from "react";
 
 import type { TaskTree } from "@/data/transformations/relationships";

plugin/src/ui/query/task/TaskList.tsx

@@ -67,6 +67,9 @@ export default defineConfig({
     }),
     bundleAnalyzerPlugin(),
   ],
+  resolve: {
+    dedupe: ["react", "react-dom"],
+  },
   build: {
     // We aren't building a website, so we build in library mode
     // and bundle the output using our index.ts as the entrypoint.