fix: Avoid race condition when dealing with image and image placehold…

…er [WPB-4890] (#15898)

src/script/event/EventRepository.ts

@@ -34,6 +34,7 @@ import {Asset as ProtobufAsset} from '@wireapp/protocol-messaging';
 import {WebAppEvents} from '@wireapp/webapp-events';
 
 import {getLogger, Logger} from 'Util/Logger';
+import {queue} from 'Util/PromiseQueue';
 import {TIME_IN_MILLIS} from 'Util/TimeUtil';
 
 import {ClientEvent} from './Client';
@@ -166,7 +167,11 @@ export class EventRepository {
     }
   };
 
-  private readonly handleIncomingEvent = async (payload: HandledEventPayload, source: NotificationSource) => {
+  /**
+   * this function will process any incoming event. It is being queued in case 2 events arrive at the same time.
+   * Processing events should happen sequentially (thus the queue)
+   */
+  private readonly handleIncomingEvent = queue(async (payload: HandledEventPayload, source: NotificationSource) => {
     try {
       await this.handleEvent(payload, source);
     } catch (error) {
@@ -176,7 +181,7 @@ export class EventRepository {
         throw error;
       }
     }
-  };
+  });
 
   /**
    * connects to the websocket with the given account

src/script/util/PromiseQueue.ts

@@ -192,3 +192,14 @@ export class PromiseQueue {
     }
   }
 }
+
+/**
+ * Will make sure a function is executed in order. If the function is already running, then the next payload will be queued.
+ * @param callback the function to queue
+ */
+export function queue<ReturnType, Params extends any[]>(
+  callback: (...params: Params) => Promise<ReturnType>,
+): (...params: Params) => Promise<ReturnType> {
+  const promiseQueue = new PromiseQueue({name: 'queue'});
+  return (...params: Params) => promiseQueue.push(() => callback(...params));
+}