feat: lazy load framer motion

studio/components/interfaces/SQLEditor/AskAIWidget.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { m } from 'framer-motion'
 import { useCallback } from 'react'
 import { AiIcon, IconCornerDownLeft, Input } from 'ui'
 
@@ -11,12 +11,12 @@ const AskAIWidget = () => {
   }, [])
 
   return (
-    <motion.div
+    <m.div
       initial={{ y: -50 }}
       animate={{ y: 0 }}
       className="bg-scale-200 rounded-md p-2 my-2 border border-scale-700 shadow-xl shadow-scale-100 flex flex-col gap-2 text-sm text-scale-1100 max-w-xl"
     >
-      <motion.div initial={{ y: -25 }} animate={{ y: 0 }}>
+      <m.div initial={{ y: -25 }} animate={{ y: 0 }}>
         <Input
           inputRef={inputRef}
           size="xlarge"
@@ -31,9 +31,9 @@ const AskAIWidget = () => {
             </div>
           }
         />
-      </motion.div>
+      </m.div>
       AI generated code may be incorrect.
-    </motion.div>
+    </m.div>
   )
 }
 

studio/components/interfaces/SQLEditor/SQLEditor.tsx

@@ -2,7 +2,7 @@ import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useSqlEditMutation } from 'data/ai/sql-edit-mutation'
 import { useExecuteSqlMutation } from 'data/sql/execute-sql-mutation'
-import { motion } from 'framer-motion'
+import { m } from 'framer-motion'
 import { useLocalStorage, useStore } from 'hooks'
 import useLatest from 'hooks/misc/useLatest'
 import dynamic from 'next/dynamic'
@@ -168,7 +168,7 @@ const SQLEditor = () => {
   return (
     <div className="flex h-full flex-col">
       {!isEditSqlLoading ? (
-        <motion.div
+        <m.div
           key="ask-ai-input"
           layoutId="ask-ai-input"
           initial={{
@@ -191,7 +191,7 @@ const SQLEditor = () => {
             disabled={isDiffOpen}
             inputRef={inputRef}
             icon={
-              <motion.div
+              <m.div
                 key="ask-ai-input-icon"
                 layoutId="ask-ai-input-icon"
                 className="ml-1"
@@ -203,7 +203,7 @@ const SQLEditor = () => {
                 }}
               >
                 <AiIcon className="w-4 h-4" />
-              </motion.div>
+              </m.div>
             }
             inputClassName="w-full !border-brand-900 border-none py-4 focus:!ring-0 placeholder:text-scale-900"
             iconContainerClassName="transition text-scale-800 text-brand-900"
@@ -296,9 +296,9 @@ const SQLEditor = () => {
               }
             }}
           />
-        </motion.div>
+        </m.div>
       ) : (
-        <motion.div
+        <m.div
           key="ask-ai-loading"
           layoutId="ask-ai-input"
           className="w-fit p-5 border border-brand-900 text-brand-900 self-center"
@@ -315,7 +315,7 @@ const SQLEditor = () => {
             damping: 30,
           }}
         >
-          <motion.div
+          <m.div
             key="ask-ai-loading-icon"
             layoutId="ask-ai-input-icon"
             animate={{
@@ -329,8 +329,8 @@ const SQLEditor = () => {
             }}
           >
             <AiIcon className="w-4 h-4" />
-          </motion.div>
-        </motion.div>
+          </m.div>
+        </m.div>
       )}
       <Split
         style={{ height: '100%' }}
@@ -343,7 +343,7 @@ const SQLEditor = () => {
         collapsed={isUtilityPanelCollapsed ? 1 : undefined}
         onDragEnd={onDragEnd}
       >
-        <motion.div
+        <m.div
           className="dark:border-dark flex-grow overflow-y-auto border-b"
           initial={{
             opacity: 0,
@@ -362,7 +362,7 @@ const SQLEditor = () => {
           ) : (
             <>
               {isDiffOpen && (
-                <motion.div
+                <m.div
                   key="diff-editor"
                   className="w-full h-full"
                   initial={{
@@ -383,10 +383,10 @@ const SQLEditor = () => {
                       fontSize: 13,
                     }}
                   />
-                </motion.div>
+                </m.div>
               )}
 
-              <motion.div
+              <m.div
                 key="monaco-editor"
                 className={cn('w-full', 'h-full', isDiffOpen && 'invisible')}
               >
@@ -399,10 +399,10 @@ const SQLEditor = () => {
                   // onOpenAiWidget={() => setIsAiWidgetOpen(true)}
                   // onCloseAiWidget={() => setIsAiWidgetOpen(false)}
                 />
-              </motion.div>
+              </m.div>
             </>
           )}
-        </motion.div>
+        </m.div>
         <div className="flex flex-col">
           {isLoading ? (
             <div className="flex h-full w-full items-center justify-center">Loading...</div>

studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx

@@ -3,14 +3,13 @@ import { partition } from 'lodash'
 import { observer } from 'mobx-react-lite'
 
 import { useParams, useTelemetryProps } from 'common'
-import { stripIndent } from 'common-tags'
 import {
   SQL_TEMPLATES,
   sqlAiDisclaimerComment,
 } from 'components/interfaces/SQLEditor/SQLEditor.constants'
 import { useSqlGenerateMutation } from 'data/ai/sql-generate-mutation'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
-import { motion } from 'framer-motion'
+import { m } from 'framer-motion'
 import { useCheckPermissions, useStore } from 'hooks'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
@@ -64,16 +63,16 @@ const SQLTemplates = observer(() => {
   return (
     <div className="block h-full space-y-8 overflow-y-auto p-6">
       <div className="mt-32 mb-32 flex flex-col items-center">
-        <motion.h1
+        <m.h1
           className="text-scale-1200 mb-8 text-3xl"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
         >
           What do you want to build?
-        </motion.h1>
+        </m.h1>
         <div className="w-full flex justify-center">
           {!isSqlGenerateLoading ? (
-            <motion.div
+            <m.div
               key="ask-ai-input"
               layoutId="ask-ai-input"
               className="w-full max-w-2xl border border-brand-900"
@@ -96,7 +95,7 @@ const SQLTemplates = observer(() => {
                   }, 200)
                 }}
                 icon={
-                  <motion.div
+                  <m.div
                     key="ask-ai-input-icon"
                     layoutId="ask-ai-input-icon"
                     className="ml-1"
@@ -108,7 +107,7 @@ const SQLTemplates = observer(() => {
                     }}
                   >
                     <AiIcon className="w-4 h-4" />
-                  </motion.div>
+                  </m.div>
                 }
                 inputClassName="w-full border-none py-4 focus:!ring-0"
                 iconContainerClassName="transition text-scale-800 text-brand-900"
@@ -155,9 +154,9 @@ const SQLTemplates = observer(() => {
                   </div>
                 }
               />
-            </motion.div>
+            </m.div>
           ) : (
-            <motion.div
+            <m.div
               key="ask-ai-loading"
               layoutId="ask-ai-input"
               className="p-5 border border-brand-900 text-brand-900"
@@ -174,7 +173,7 @@ const SQLTemplates = observer(() => {
                 damping: 30,
               }}
             >
-              <motion.div
+              <m.div
                 key="ask-ai-loading-icon"
                 layoutId="ask-ai-input-icon"
                 animate={{
@@ -188,8 +187,8 @@ const SQLTemplates = observer(() => {
                 }}
               >
                 <AiIcon className="w-4 h-4" />
-              </motion.div>
-            </motion.div>
+              </m.div>
+            </m.div>
           )}
         </div>
       </div>

studio/pages/_app.tsx

@@ -54,6 +54,9 @@ import Favicons from 'components/head/Favicons'
 import { IS_PLATFORM } from 'lib/constants'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
 import { createClient } from '@supabase/supabase-js'
+import { LazyMotion } from 'framer-motion'
+
+const motionFeatures = () => import('./motion-features').then((res) => res.default)
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -143,7 +146,9 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                       <ThemeProvider>
                         <CommandMenuWrapper>
                           <AppBannerWrapper>
-                            {getLayout(<Component {...pageProps} />)}
+                            <LazyMotion features={motionFeatures} strict>
+                              {getLayout(<Component {...pageProps} />)}
+                            </LazyMotion>
                           </AppBannerWrapper>
                         </CommandMenuWrapper>
                       </ThemeProvider>

studio/pages/motion-features.ts

@@ -0,0 +1,2 @@
+import { domMax } from 'framer-motion'
+export default domMax