resolve theopenconversationkit#119: avoid playing display animation twice

Author: Fabien Hervé

src/TockContext.tsx

@@ -91,7 +91,7 @@ export enum MessageType {
 
 export interface Message {
   type: MessageType;
-  isStoredInLocalStorage?: boolean;
+  alreadyDisplayed?: boolean;
 }
 
 export interface TextMessage extends Message {

src/components/Conversation/Conversation.tsx

@@ -10,7 +10,7 @@ import Loader from '../Loader';
 import Image from '../Image';
 import QuickReplyList from '../QuickReplyList';
 import InlineQuickReplyList from '../InlineQuickReplyList';
-import useIntervalCounter from './hooks/useIntervalCounter';
+import useMessageCounter from './hooks/useMessageCounter';
 import useScrollBehaviour from './hooks/useScrollBehaviour';
 import { useTheme } from '@emotion/react';
 import '../../styles/theme';
@@ -139,12 +139,7 @@ const Conversation = ({
   ...rest
 }: Props) => {
   if (messages && messages.length !== 0) {
-    const displayableMessageCount = useIntervalCounter(
-      messages.filter((message) => message.isStoredInLocalStorage === true)
-        .length,
-      messages.length,
-      messageDelay,
-    );
+    const displayableMessageCount = useMessageCounter(messages, messageDelay);
     const theme: TockTheme = useTheme();
     const displayableMessages = messages.slice(0, displayableMessageCount);
     const scrollContainer = useScrollBehaviour([displayableMessages]);

src/components/Conversation/hooks/useIntervalCounter.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { Message } from '../../../TockContext';
+
+export default function useMessageCounter(
+  messages: Message[],
+  delay: number,
+): number {
+  const [counter, setCounter] = useState(
+    () =>
+      // Exempt previously displayed messages from the loading animation
+      messages.filter((message) => message.alreadyDisplayed === true).length,
+  );
+  const targetValue = messages.length;
+
+  useEffect(() => {
+    if (counter > targetValue) {
+      setCounter(targetValue);
+    } else if (counter < targetValue) {
+      setTimeout(() => {
+        messages[counter].alreadyDisplayed = true;
+        setCounter(counter + 1);
+      }, delay);
+    }
+  }, [counter, targetValue]);
+
+  return counter;
+}

src/components/Conversation/hooks/useMessageCounter.ts

@@ -446,7 +446,7 @@ const useTock: (
       dispatch({
         type: 'ADD_MESSAGE',
         messages: history.map((message: Message) => {
-          message.isStoredInLocalStorage = true;
+          message.alreadyDisplayed = true;
           return message;
         }),
       });