Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

fix: remove weird animation introduced in v1.3.0

Browse Source
This commit is contained in:
Divlo 2022-12-13 11:46:31 +01:00
parent 1ea78821b0
commit 109da1be71
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9
4 changed files with 16 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/Application/Messages/Message/Message.tsx
View File

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

29
components/Application/Messages/Messages.tsx
View File

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

185
package-lock.json generated
View File

@ -17,7 +17,6 @@
"clsx": "1.2.1", "clsx": "1.2.1",
"date-and-time": "2.4.1", "date-and-time": "2.4.1",
"emoji-mart": "3.0.1", "emoji-mart": "3.0.1",
"framer-motion": "7.7.2",
"katex": "0.16.4", "katex": "0.16.4",
"next": "13.0.6", "next": "13.0.6",
"next-pwa": "5.6.0", "next-pwa": "5.6.0",
@ -2112,21 +2111,6 @@
"@edge-runtime/primitives": "2.0.0" "@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": { "node_modules/@eslint-community/eslint-utils": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.1.2.tgz", "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-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": { "node_modules/@next/env": {
"version": "13.0.6", "version": "13.0.6",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz",
@ -9244,23 +9170,6 @@
"url": "https://www.patreon.com/infusion" "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": { "node_modules/fresh": {
"version": "0.5.2", "version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -10164,11 +10073,6 @@
"tslib": "^2.0.3" "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": { "node_modules/highlight.js": {
"version": "10.7.3", "version": "10.7.3",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@ -24682,21 +24586,6 @@
"@edge-runtime/primitives": "2.0.0" "@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": { "@eslint-community/eslint-utils": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.1.2.tgz", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.1.2.tgz",
@ -25126,64 +25015,6 @@
"tar": "^6.1.11" "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": { "@next/env": {
"version": "13.0.6", "version": "13.0.6",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz",
@ -29986,17 +29817,6 @@
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"dev": true "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": { "fresh": {
"version": "0.5.2", "version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -30684,11 +30504,6 @@
"tslib": "^2.0.3" "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": { "highlight.js": {
"version": "10.7.3", "version": "10.7.3",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",

1
package.json
View File

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