diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx index d6f474f30..3fec90603 100644 --- a/ts/components/StoryViewer.tsx +++ b/ts/components/StoryViewer.tsx @@ -2,7 +2,13 @@ // SPDX-License-Identifier: AGPL-3.0-only import FocusTrap from 'focus-trap-react'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import classNames from 'classnames'; import { useSpring, animated, to } from '@react-spring/web'; import type { BodyRangeType, LocalizerType } from '../types/Util'; @@ -197,6 +203,13 @@ export const StoryViewer = ({ }; }, [attachment]); + const unmountRef = useRef(false); + useEffect(() => { + return () => { + unmountRef.current = true; + }; + }); + const [styles, spring] = useSpring( () => ({ from: { width: 0 }, @@ -204,6 +217,13 @@ export const StoryViewer = ({ loop: true, onRest: { width: ({ value }) => { + if (unmountRef.current) { + log.info( + 'stories.StoryViewer.spring.onRest: called after component unmounted' + ); + return; + } + if (value === 100) { viewStory( story.messageId, diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 03bd79a46..376214a97 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -9293,6 +9293,13 @@ "reasonCategory": "usageTrusted", "updated": "2022-04-29T23:54:21.656Z" }, + { + "rule": "React-useRef", + "path": "ts/components/StoryViewer.tsx", + "line": " const unmountRef = useRef(false);", + "reasonCategory": "usageTrusted", + "updated": "2022-07-18T23:30:04.033Z" + }, { "rule": "React-useRef", "path": "ts/components/StoryViewsNRepliesModal.tsx",