- change to name 404 internal because the 404 is only visible to logged in users

- switched from 404 recursive to iterative chat

src/allStyles.styl

@@ -9,7 +9,7 @@
 //webpack  import 'react-notifications/lib/notifications.css';
 @import "../customChangedLib/react-notifications/notifications.styl"
 
-@import "../src/components/404/style.styl"
+@import "components/404internal/style.styl"
 
 @import "../src/components/helpers/styles.styl"
 

src/app.tsx

@@ -114,7 +114,7 @@ import Spinner from './components/helpers/spinner'
 import SystemSettingsSite from './components/sites/systemSettingsSite/systemSettingsSite'
 
 import {tempPrintDivId} from './constants'
-import Chat404 from '../src/components/404/Chat404'
+import Chat404 from './components/404internal/Chat404'
 
 const mapStateToProps = (rootState: RootState) => {
   return {

src/components/404/Chat404.tsx → src/components/404internal/Chat404.tsx

@@ -79,8 +79,7 @@ class Chat404 extends React.Component<Props, State> {
   }
 
   componentDidMount(): void {
-
-    this.addNextMessage(0)
+    this.displayAllMessages()
   }
 
   componentWillUnmount(): void {
@@ -97,83 +96,53 @@ class Chat404 extends React.Component<Props, State> {
     return Math.floor(Math.random() * (inclusiveMax + 1 - inclusiveMin)) + inclusiveMin;
   }
 
-  async addNextMessage(index: number): Promise<void> {
-
-    if (this.disposed) return
-
-    if (index >= this.conversationCopy.length) {
-      return
-    }
+  async displayAllMessages(): Promise<void> {
 
     // tslint:disable-next-line
-    let msg = this.conversationCopy[index]
-
-    if (msg.kind === 'message') {
-
-      await wait(this.getRndDelay())
-
-      const wasLoading = msg.withLoading
-
-      if (msg.withLoading) {
+    for (let i = 0; i < this.conversationCopy.length; i++) {
+      // tslint:disable-next-line
+      let message = this.conversationCopy[i];
 
+      if (this.disposed) return
 
-        if (this.disposed) return
+      //a message could need to display loading
+      if (message.kind === 'message' && message.withLoading) {
 
-        //first add loading...
         this.setState((prevState: State) => {
           return {
-            currentConversation: [...prevState.currentConversation, msg],
+            currentConversation: [...prevState.currentConversation, message],
           } as State
         })
-      }
 
-      await wait(this.getRndDelay())
-
-      if (wasLoading) {
-
-        msg = {
-          ...msg,
+        message = {
+          ...message,
           withLoading: false
         } as ChatMessage
 
-        if (this.disposed) return
 
+        await wait(this.getRndDelay())
+
+        //remove old message and insert new with changed props
         this.setState((prevState: State) => {
           return {
             currentConversation: [...prevState.currentConversation.filter(
-              (value, index1) => index1 !== prevState.currentConversation.length - 1), msg],
+              (value, index1) => index1 !== prevState.currentConversation.length - 1), message],
           } as State
         })
 
-      } else {
-
-        if (this.disposed) return
-
-        this.setState((prevState: State) => {
-          return {
-            currentConversation: [...prevState.currentConversation, msg],
-          } as State
-        })
+        await wait(this.getRndDelay())
 
+        continue
       }
 
-
-      this.addNextMessage(index + 1)
-
-    } else {
-
-      await wait(this.getRndDelay())
-
-      if (this.disposed) return
-
-      //set immediately
       this.setState((prevState: State) => {
         return {
-          currentConversation: [...prevState.currentConversation, msg],
+          currentConversation: [...prevState.currentConversation, message],
         } as State
       })
 
-      this.addNextMessage(index + 1)
+      await wait(this.getRndDelay())
+
 
     }
 
@@ -406,7 +375,7 @@ const conversion: ReadonlyArray<ChatMessage> = [
     kind: 'message',
     name: 'Janis',
     withLoading: true,
-    message: 'Ich sag dazu jetzt mal lieber nichts.'
+    message: 'Ich sag dazu jetzt mal lieber nichts...'
   },
   {
     kind: 'message',