diff --git a/src/assets/tgs-previews/message/Writing.svg b/src/assets/tgs-previews/message/Writing.svg new file mode 100644 index 000000000..6cf2b0bc2 --- /dev/null +++ b/src/assets/tgs-previews/message/Writing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/common/TypingWrapper.module.scss b/src/components/common/TypingWrapper.module.scss index aa1cd95ed..4089f5b4d 100644 --- a/src/components/common/TypingWrapper.module.scss +++ b/src/components/common/TypingWrapper.module.scss @@ -20,6 +20,11 @@ } } +.fullyRevealed { + --typing-draft-progress: 100%; + --typing-draft-spread: 0%; +} + .placeholder { display: inline-block; width: 1.25rem; diff --git a/src/components/common/TypingWrapper.tsx b/src/components/common/TypingWrapper.tsx index 2079fc9b4..8fac167c9 100644 --- a/src/components/common/TypingWrapper.tsx +++ b/src/components/common/TypingWrapper.tsx @@ -6,7 +6,8 @@ import { import type { ApiFormattedText } from '../../api/types'; import { requestMutation } from '../../lib/fasterdom/fasterdom'; -import { LOCAL_TGS_URLS } from './helpers/animatedAssets'; +import buildClassName from '../../util/buildClassName'; +import { LOCAL_TGS_PREVIEW_URLS, LOCAL_TGS_URLS } from './helpers/animatedAssets'; import { REM } from './helpers/mediaDimensions'; import useLastCallback from '../../hooks/useLastCallback'; @@ -57,9 +58,11 @@ const TypingWrapper = ({ renderText, onCompleted, }: OwnProps) => { + const fullText = formattedText.text; + const ref = useRef(); const animationRef = useRef(); - const progressRef = useRef(0); + const progressRef = useRef(fullText ? 0 : 100); const prevRevealedRef = useRef(0); const fullTextRef = useRef(''); @@ -69,7 +72,6 @@ const TypingWrapper = ({ const completedKeyRef = useRef(); const prevFullTextRef = useRef(''); - const fullText = formattedText.text; fullTextRef.current = fullText; const stopAnimation = useLastCallback(() => { @@ -244,14 +246,16 @@ const TypingWrapper = ({ text: fullText.slice(0, revealedLength), entities: formattedText.entities, }), [fullText, formattedText.entities, revealedLength]); + const className = buildClassName(styles.root, !fullText && styles.fullyRevealed); return ( - + {renderText(truncatedText)} {shouldRenderPlaceholder && (