fix: remove weird animation introduced in v1.3.0

components/Application/Messages/Message/Message.tsx

@@ -2,8 +2,6 @@ import { useState, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import date from 'date-and-time'
-import type { MotionProps } from 'framer-motion'
-import { motion } from 'framer-motion'
 
 import type { MessageWithMember } from '../../../../models/Message'
 import { MessageText } from './MessageText'
@@ -13,7 +11,7 @@ import { useAuthentication } from '../../../../tools/authentication'
 import { MessageOptions } from './MessageOptions'
 import { EditMessage } from './EditMessage'
 
-export interface MessageProps extends MotionProps {
+export interface MessageProps {
   message: MessageWithMember
 }
 
@@ -58,19 +56,9 @@ export const Message: React.FC<MessageProps> = (props) => {
   }
 
   return (
-    <motion.div
+    <div
-      layout
-      initial='initial'
-      animate='animate'
-      exit='exit'
       data-cy={`message-${message.id}`}
       className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
-      transition={{ type: 'spring', stiffness: 500, damping: 60 }}
-      variants={{
-        initial: { x: -100, opacity: 0 },
-        animate: { x: 0, opacity: 1 },
-        exit: { opacity: 0 }
-      }}
     >
       <Link href={`/application/users/${message.member.user.id}`}>
         <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
@@ -136,6 +124,6 @@ export const Message: React.FC<MessageProps> = (props) => {
           <Loader />
         )}
       </div>
-    </motion.div>
+    </div>
   )
 }

components/Application/Messages/Messages.tsx

@@ -1,6 +1,5 @@
 import useTranslation from 'next-translate/useTranslation'
 import InfiniteScroll from 'react-infinite-scroll-component'
-import { AnimatePresence } from 'framer-motion'
 
 import { Loader } from '../../design/Loader'
 import { Message } from './Message'
@@ -30,7 +29,6 @@ export const Messages: React.FC = () => {
       id='messages'
       className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
     >
-      <AnimatePresence>
       <InfiniteScroll
         scrollableTarget='messages'
         className='messages-list !overflow-x-hidden'
@@ -44,7 +42,6 @@ export const Messages: React.FC = () => {
           return <Message key={message.id} message={message} />
         })}
       </InfiniteScroll>
-      </AnimatePresence>
     </div>
   )
 }

package-lock.json

@@ -17,7 +17,6 @@
         "clsx": "1.2.1",
         "date-and-time": "2.4.1",
         "emoji-mart": "3.0.1",
-        "framer-motion": "7.7.2",
         "katex": "0.16.4",
         "next": "13.0.6",
         "next-pwa": "5.6.0",
@@ -2112,21 +2111,6 @@
         "@edge-runtime/primitives": "2.0.0"
       }
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.1.2.tgz",
@@ -2636,64 +2620,6 @@
         "node-pre-gyp": "bin/node-pre-gyp"
       }
     },
-    "node_modules/@motionone/animation": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
-      "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
-      "dependencies": {
-        "@motionone/easing": "^10.15.1",
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/dom": {
-      "version": "10.13.1",
-      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz",
-      "integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==",
-      "dependencies": {
-        "@motionone/animation": "^10.13.1",
-        "@motionone/generators": "^10.13.1",
-        "@motionone/types": "^10.13.0",
-        "@motionone/utils": "^10.13.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/easing": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
-      "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
-      "dependencies": {
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/generators": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
-      "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
-      "dependencies": {
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/types": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
-      "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA=="
-    },
-    "node_modules/@motionone/utils": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
-      "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
-      "dependencies": {
-        "@motionone/types": "^10.15.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
     "node_modules/@next/env": {
       "version": "13.0.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz",
@@ -9244,23 +9170,6 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.7.2.tgz",
-      "integrity": "sha512-SDq4pansh+UxMtHuApQmyXbbb/oQu3LwhPByiGKXLrKRHxmHiq7VML0/mnFQQRIpWiYR/+wM4q8foFzeoaz8eg==",
-      "dependencies": {
-        "@motionone/dom": "10.13.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "2.4.0"
-      },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      }
-    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -10164,11 +10073,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
-    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -24682,21 +24586,6 @@
         "@edge-runtime/primitives": "2.0.0"
       }
     },
-    "@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "requires": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
-    },
     "@eslint-community/eslint-utils": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.1.2.tgz",
@@ -25126,64 +25015,6 @@
         "tar": "^6.1.11"
       }
     },
-    "@motionone/animation": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
-      "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
-      "requires": {
-        "@motionone/easing": "^10.15.1",
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "@motionone/dom": {
-      "version": "10.13.1",
-      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz",
-      "integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==",
-      "requires": {
-        "@motionone/animation": "^10.13.1",
-        "@motionone/generators": "^10.13.1",
-        "@motionone/types": "^10.13.0",
-        "@motionone/utils": "^10.13.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
-    "@motionone/easing": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
-      "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
-      "requires": {
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "@motionone/generators": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
-      "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
-      "requires": {
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "@motionone/types": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
-      "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA=="
-    },
-    "@motionone/utils": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
-      "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
-      "requires": {
-        "@motionone/types": "^10.15.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
     "@next/env": {
       "version": "13.0.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz",
@@ -29986,17 +29817,6 @@
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true
     },
-    "framer-motion": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.7.2.tgz",
-      "integrity": "sha512-SDq4pansh+UxMtHuApQmyXbbb/oQu3LwhPByiGKXLrKRHxmHiq7VML0/mnFQQRIpWiYR/+wM4q8foFzeoaz8eg==",
-      "requires": {
-        "@emotion/is-prop-valid": "^0.8.2",
-        "@motionone/dom": "10.13.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "2.4.0"
-      }
-    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -30684,11 +30504,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
-    },
     "highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",

package.json

@@ -40,7 +40,6 @@
     "clsx": "1.2.1",
     "date-and-time": "2.4.1",
     "emoji-mart": "3.0.1",
-    "framer-motion": "7.7.2",
     "katex": "0.16.4",
     "next": "13.0.6",
     "next-pwa": "5.6.0",