diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx index ac333198cd..426c31acee 100644 --- a/client/src/components/Chat/Landing.tsx +++ b/client/src/components/Chat/Landing.tsx @@ -19,6 +19,11 @@ import { useLocalize, useAuthContext } from '~/hooks'; const containerClassName = 'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white dark:bg-presentation dark:text-white text-black dark:after:shadow-none '; +/** Stable references: fresh literals re-initialized SplitText's springs and + * re-rendered every grapheme span on each Landing render. */ +const greetingAnimationFrom = { opacity: 0, transform: 'translate3d(0,50px,0)' }; +const greetingAnimationTo = { opacity: 1, transform: 'translate3d(0,0,0)' }; + function getTextSizeClass(text: string | undefined | null) { if (!text) { return 'text-xl sm:text-2xl'; @@ -202,8 +207,8 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding: className={`${getTextSizeClass(name)} font-medium text-text-primary`} delay={50} textAlign="center" - animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }} - animationTo={{ opacity: 1, transform: 'translate3d(0,0,0)' }} + animationFrom={greetingAnimationFrom} + animationTo={greetingAnimationTo} easing={easings.easeOutCubic} threshold={0} rootMargin="0px" @@ -217,8 +222,8 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding: className={`${getTextSizeClass(greetingText)} font-medium text-text-primary`} delay={50} textAlign="center" - animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }} - animationTo={{ opacity: 1, transform: 'translate3d(0,0,0)' }} + animationFrom={greetingAnimationFrom} + animationTo={greetingAnimationTo} easing={easings.easeOutCubic} threshold={0} rootMargin="0px" diff --git a/client/src/components/Chat/Messages/ui/MessageTimestamp.tsx b/client/src/components/Chat/Messages/ui/MessageTimestamp.tsx index 079fa4349c..07c32b23a0 100644 --- a/client/src/components/Chat/Messages/ui/MessageTimestamp.tsx +++ b/client/src/components/Chat/Messages/ui/MessageTimestamp.tsx @@ -2,23 +2,9 @@ import { useTranslation } from 'react-i18next'; import useTimeTick from '~/hooks/useTimeTick'; import { getMessageTimestamp } from '~/utils'; -/** - * Inline message timestamp shown next to the author name in the message header. - * On hover-capable pointers it reveals on row hover/focus; on touch and other - * non-hover devices it stays visible. Recent messages show the relative form - * ("10 minutes ago") with the absolute date on hover; older messages show the - * absolute date directly. - */ -export default function MessageTimestamp({ value }: { value?: string | null }) { - const { i18n } = useTranslation(); - // Re-render on a shared interval so relative labels stay current while idle. - useTimeTick(); - const timestamp = getMessageTimestamp(value, i18n.language); - - if (!timestamp) { - return null; - } +type Timestamp = NonNullable>; +function TimestampText({ timestamp }: { timestamp: Timestamp }) { return (