foo.diff

diff --git a/src/protocol/graphics.ts b/src/protocol/graphics.ts
index 80d7e5c0..dd842802 100644
--- a/src/protocol/graphics.ts
+++ b/src/protocol/graphics.ts
@@ -70,6 +70,15 @@ function insertEntrySorted<T extends Timed>(array: T[], entry: T) {
   }
 }
 
+export function insertTypedEntrySorted(type, event) {
+  const map = {
+    mouseEvent: gMouseEvents,
+    clickEvent: gMouseClickEvents,
+  };
+
+  insertEntrySorted(map[type], event);
+}
+
 function closerEntry<T1 extends Timed, T2 extends Timed>(
   time: number,
   entry1: T1 | null,
@@ -116,17 +125,6 @@ function onPaints({ paints }: paintPoints) {
   });
 }
 
-function onMouseEvents(events: MouseEvent[], store: UIStore) {
-  events.forEach(entry => {
-    insertEntrySorted(gMouseEvents, entry);
-    if (entry.kind == "mousedown") {
-      insertEntrySorted(gMouseClickEvents, entry);
-    }
-  });
-
-  store.dispatch(actions.setEventsForType(gMouseClickEvents, "mousedown"));
-}
-
 class VideoPlayer {
   store: UIStore | null = null;
   video: HTMLVideoElement | null = null;
@@ -205,9 +203,6 @@ export function setupGraphics(store: UIStore) {
     paintPointsWaiter = client.Graphics.findPaints({}, sessionId);
     client.Graphics.addPaintPointsListener(onPaints);
 
-    client.Session.findMouseEvents({}, sessionId);
-    client.Session.addMouseEventsListener(({ events }) => onMouseEvents(events, store));
-
     if (features.videoPlayback) {
       client.Graphics.getPlaybackVideo({}, sessionId);
       client.Graphics.addPlaybackVideoFragmentListener(param => Video.append(param.fragment));
diff --git a/src/ui/actions/app.ts b/src/ui/actions/app.ts
index b5c545ad..c80999cb 100644
--- a/src/ui/actions/app.ts
+++ b/src/ui/actions/app.ts
@@ -9,6 +9,7 @@ import {
   MouseEvent,
   loadedRegions,
 } from "@recordreplay/protocol";
+import { client } from "protocol/socket";
 import { ThreadFront } from "protocol/thread";
 import * as selectors from "ui/reducers/app";
 import {
@@ -118,9 +119,11 @@ export type AppActions =
   | SetAwaitingSourcemapsAction;
 
 export function setupApp(store: UIStore) {
-  ThreadFront.waitForSession().then(sessionId =>
-    store.dispatch({ type: "set_session_id", sessionId })
-  );
+  ThreadFront.waitForSession().then(sessionId => {
+    store.dispatch({ type: "set_session_id", sessionId });
+    client.Session.findMouseEvents({}, sessionId);
+    client.Session.addMouseEventsListener(({ events }) => onMouseEvents(events, store));
+  });
 
   ThreadFront.ensureProcessed("basic", undefined, regions =>
     store.dispatch(onUnprocessedRegions(regions))
@@ -138,6 +141,17 @@ export function setupApp(store: UIStore) {
   });
 }
 
+function onMouseEvents(events: MouseEvent[], store: UIStore) {
+  events.forEach(entry => {
+    insertTypedEntrySorted("mouseEvent", entry);
+    if (entry.kind == "mousedown") {
+      insertTypedEntrySorted("mouseClick", entry);
+    }
+  });
+
+  store.dispatch(appendEventsForType("mousedown", events));
+}
+
 function onUnprocessedRegions({ level, regions }: unprocessedRegions): UIThunkAction {
   return ({ dispatch, getState }) => {
     let endPoint = Math.max(...regions.map(r => r.end.time), 0);