fix ui: fix reader byte skipping, add pause on css loading screen (#2058)

frontend/app/components/Session/WebPlayer.tsx

@@ -65,7 +65,10 @@ function WebPlayer(props: any) {
     }
   }, [session.sessionId]);
 
-  const { firstVisualEvent: visualOffset, messagesProcessed } = contextValue.store?.get() || {};
+  const { firstVisualEvent: visualOffset, messagesProcessed, tabStates, ready } = contextValue.store?.get() || {};
+  const cssLoading = ready && tabStates ? Object.values(tabStates).some(
+    ({ cssLoading }) => cssLoading
+  ) : true
 
   React.useEffect(() => {
     if (messagesProcessed && (session.events.length > 0 || session.errors.length > 0)) {

frontend/app/player/mobile/IOSMessageManager.ts

@@ -282,7 +282,7 @@ export default class IOSMessageManager implements IMessageManager {
   setMessagesLoading = (messagesLoading: boolean) => {
     this.screen.display(!messagesLoading);
     // @ts-ignore idk
-    this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading });
+    this.state.update({ messagesLoading, ready: !messagesLoading });
   };
 
   private setSize({ height, width }: { height: number; width: number }) {

frontend/app/player/web/MessageManager.ts

@@ -63,6 +63,7 @@ export interface State extends ScreenState {
   currentTab: string;
   tabs: Set<string>;
   tabChangeEvents: TabChangeEvent[];
+  sessionStart: number;
 }
 
 export const visualChanges = [
@@ -90,6 +91,7 @@ export default class MessageManager {
     currentTab: '',
     tabs: new Set(),
     tabChangeEvents: [],
+    sessionStart: 0,
   };
 
   private clickManager: ListWalker<MouseClick> = new ListWalker();
@@ -116,6 +118,7 @@ export default class MessageManager {
   ) {
     this.mouseMoveManager = new MouseMoveManager(screen);
     this.sessionStart = this.session.startedAt;
+    state.update({ sessionStart: this.sessionStart });
     this.activityManager = new ActivityManager(this.session.duration.milliseconds); // only if not-live
   }
 
@@ -325,8 +328,9 @@ export default class MessageManager {
       this.updateChangeEvents();
     }
     this.screen.display(!messagesLoading);
-    // @ts-ignore idk
-    this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading });
+    const cssLoading = Object.values(this.state.get().tabStates).some((tab) => tab.cssLoading);
+    const isReady = !messagesLoading && !cssLoading
+    this.state.update({ messagesLoading, ready: isReady});
   };
 
   decodeMessage(msg: Message) {

frontend/app/player/web/messages/MFileReader.ts

@@ -56,6 +56,9 @@ export default class MFileReader extends RawMessageReader {
    * */
   private readRawMessage(): RawMessage | null {
     try {
+      if (!this.noIndexes) {
+        this.skip(8)
+      }
       return super.readMessage()
     } catch (e) {
       this.logger.error("Read message error:", e)