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 && (