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
-      layout
-      initial='initial'
-      animate='animate'
-      exit='exit'
+    <div
       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,21 +29,19 @@ 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'
-          dataLength={messages.length}
-          next={nextPage}
-          inverse
-          hasMore={hasMore}
-          loader={<Loader />}
-        >
-          {messages.map((message) => {
-            return <Message key={message.id} message={message} />
-          })}
-        </InfiniteScroll>
-      </AnimatePresence>
+      <InfiniteScroll
+        scrollableTarget='messages'
+        className='messages-list !overflow-x-hidden'
+        dataLength={messages.length}
+        next={nextPage}
+        inverse
+        hasMore={hasMore}
+        loader={<Loader />}
+      >
+        {messages.map((message) => {
+          return <Message key={message.id} message={message} />
+        })}
+      </InfiniteScroll>
     </div>
   )
 }