Prune the story progress effect's dependency list

ts/components/Stories.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import FocusTrap from 'focus-trap-react';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
 import type { ConversationStoryType } from './StoryListItem';
 import type { LocalizerType } from '../types/Util';
@@ -42,34 +42,38 @@ export const Stories = ({
     requiresFullWidth: true,
   });
 
+  const onNextUserStories = useCallback(() => {
+    const storyIndex = stories.findIndex(
+      x => x.conversationId === conversationIdToView
+    );
+    if (storyIndex >= stories.length - 1 || storyIndex === -1) {
+      setConversationIdToView(undefined);
+      return;
+    }
+    const nextStory = stories[storyIndex + 1];
+    setConversationIdToView(nextStory.conversationId);
+  }, [conversationIdToView, stories]);
+
+  const onPrevUserStories = useCallback(() => {
+    const storyIndex = stories.findIndex(
+      x => x.conversationId === conversationIdToView
+    );
+    if (storyIndex <= 0) {
+      setConversationIdToView(undefined);
+      return;
+    }
+    const prevStory = stories[storyIndex - 1];
+    setConversationIdToView(prevStory.conversationId);
+  }, [conversationIdToView, stories]);
+
   return (
     <div className={classNames('Stories', themeClassName(Theme.Dark))}>
       {conversationIdToView &&
         renderStoryViewer({
           conversationId: conversationIdToView,
           onClose: () => setConversationIdToView(undefined),
-          onNextUserStories: () => {
+          onNextUserStories,
-            const storyIndex = stories.findIndex(
+          onPrevUserStories,
-              x => x.conversationId === conversationIdToView
-            );
-            if (storyIndex >= stories.length - 1 || storyIndex === -1) {
-              setConversationIdToView(undefined);
-              return;
-            }
-            const nextStory = stories[storyIndex + 1];
-            setConversationIdToView(nextStory.conversationId);
-          },
-          onPrevUserStories: () => {
-            const storyIndex = stories.findIndex(
-              x => x.conversationId === conversationIdToView
-            );
-            if (storyIndex <= 0) {
-              setConversationIdToView(undefined);
-              return;
-            }
-            const prevStory = stories[storyIndex - 1];
-            setConversationIdToView(prevStory.conversationId);
-          },
         })}
       <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
         <div className="Stories__pane" style={{ width }}>

ts/components/StoryViewer.tsx

@@ -176,21 +176,11 @@ export const StoryViewer = ({
     };
   }, [attachment]);
 
-  const [styles, spring] = useSpring(() => ({
+  const [styles, spring] = useSpring(
-    from: { width: 0 },
+    () => ({
-    to: { width: 100 },
-    loop: true,
-  }));
-
-  // Adding "currentStoryIndex" to the dependency list here to explcitly signal
-  // that this useEffect should run whenever the story changes.
-  useEffect(() => {
-    spring.start({
-      config: {
-        duration: storyDuration,
-      },
       from: { width: 0 },
       to: { width: 100 },
+      loop: true,
       onRest: {
         width: ({ value }) => {
           if (value === 100) {
@@ -198,12 +188,25 @@ export const StoryViewer = ({
           }
         },
       },
+    }),
+    [showNextStory]
+  );
+
+  // We need to be careful about this effect refreshing, it should only run
+  // every time a story changes or its duration changes.
+  useEffect(() => {
+    spring.start({
+      config: {
+        duration: storyDuration,
+      },
+      from: { width: 0 },
+      to: { width: 100 },
     });
 
     return () => {
       spring.stop();
     };
-  }, [currentStoryIndex, showNextStory, spring, storyDuration]);
+  }, [currentStoryIndex, spring, storyDuration]);
 
   useEffect(() => {
     if (hasReplyModal) {

ts/util/lint/exceptions.json

@@ -4501,18 +4501,18 @@
     "updated": "2020-09-11T17:24:56.124Z",
     "reasonDetail": "Read, not write"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "node_modules/moment/min/moment.min.js",
-    "reasonCategory": "falseMatch",
-    "updated": "2021-05-07T01:39:53.992Z"
-  },
   {
     "rule": "jQuery-$(",
     "path": "node_modules/moment/min/moment-with-locales.min.js",
     "reasonCategory": "falseMatch",
     "updated": "2022-04-11T17:11:47.521Z"
   },
+  {
+    "rule": "jQuery-$(",
+    "path": "node_modules/moment/min/moment.min.js",
+    "reasonCategory": "falseMatch",
+    "updated": "2021-05-07T01:39:53.992Z"
+  },
   {
     "rule": "jQuery-insertBefore(",
     "path": "node_modules/neo-async/async.js",