resolve theopenconversationkit#145: skip loading delay before user messages (theopenconversationkit#146)

Author: Fabilin

src/components/Conversation/Conversation.tsx

@@ -138,7 +138,11 @@ const Conversation = ({
   ...rest
 }: Props): JSX.Element => {
   if (messages && messages.length !== 0) {
-    const displayableMessageCount = useMessageCounter(messages, messageDelay);
+    const displayableMessageCount = useMessageCounter(
+      messages,
+      messageDelay,
+      (message) => 'author' in message && message.author === 'user',
+    );
     const theme: TockTheme = useTheme();
     const displayableMessages = messages.slice(0, displayableMessageCount);
     const scrollContainer = useScrollBehaviour([displayableMessages]);

src/components/Conversation/hooks/useMessageCounter.ts

@@ -4,23 +4,34 @@ import { Message } from '../../../model/messages';
 export default function useMessageCounter(
   messages: Message[],
   delay: number,
+  skipDelay: (message: Message) => boolean,
 ): number {
-  const [counter, setCounter] = useState(
-    () =>
-      // Exempt previously displayed messages from the loading animation
-      messages.filter((message) => message.alreadyDisplayed === true).length,
-  );
+  const [counter, setCounter] = useState(0);
   const targetValue = messages.length;
+  const shouldDisplayNow = (m: Message) => m.alreadyDisplayed || skipDelay(m);
+  const advance = () => {
+    setCounter((c) => {
+      // always increment the counter by at least one
+      do {
+        messages[c].alreadyDisplayed = true;
+        c++;
+      } while (c < targetValue && shouldDisplayNow(messages[c]));
+      return c;
+    });
+  };
+
+  if (counter > targetValue) {
+    setCounter(targetValue);
+  } else if (counter < targetValue && shouldDisplayNow(messages[counter])) {
+    advance();
+  }
 
   useEffect(() => {
-    if (counter > targetValue) {
-      setCounter(targetValue);
-    } else if (counter < targetValue) {
-      setTimeout(() => {
-        messages[counter].alreadyDisplayed = true;
-        setCounter(counter + 1);
-      }, delay);
+    if (counter < targetValue) {
+      const id = setTimeout(advance, delay);
+      return () => clearTimeout(id);
     }
+    return;
   }, [counter, targetValue]);
 
   return counter;

src/components/Conversation/index.ts

@@ -1,3 +1,2 @@
-import Conversation from './Conversation';
-
-export default Conversation;
+export { default } from './Conversation';
+export { default as useMessageCounter } from './hooks/useMessageCounter';

src/index.ts

@@ -8,7 +8,10 @@ export { default as Chat } from './components/Chat';
 export { default as ChatInput } from './components/ChatInput';
 export { default as Container } from './components/Container';
 export { default as Loader } from './components/Loader';
-export { default as Conversation } from './components/Conversation';
+export {
+  default as Conversation,
+  useMessageCounter,
+} from './components/Conversation';
 export { default as Image } from './components/Image';
 export {
   default as MessageBot,