refactor(player):ISP on StyleManager setLoader

frontend/app/player/web/MessageManager.ts

@@ -123,7 +123,10 @@ export default class MessageManager {
     private readonly screen: Screen,
     initialLists?: Partial<InitialLists>
   ) {
-    this.pagesManager = new PagesManager(screen, this.session.isMobile,  this)
+    this.pagesManager = new PagesManager(screen, this.session.isMobile, cssLoading => {
+      screen.displayFrame(!cssLoading)
+      state.update({ cssLoading })
+    })
     this.mouseMoveManager = new MouseMoveManager(screen)
 
     this.sessionStart = this.session.startedAt
@@ -482,11 +485,6 @@ export default class MessageManager {
     this.state.update({ messagesLoading });
   }
 
-  setCSSLoading(cssLoading: boolean) {
-    this.screen.displayFrame(!cssLoading);
-    this.state.update({ cssLoading });
-  }
-
   private setSize({ height, width }: { height: number, width: number }) {
     this.screen.scale({ height, width });
     this.state.update({ width, height });

frontend/app/player/web/WebLivePlayer.ts

@@ -28,7 +28,7 @@ export default class WebLivePlayer extends WebPlayer {
 
     this.assistManager = new AssistManager(
       session,
-      f => this.messageManager.setCSSLoading(f),
+      f => this.messageManager.setMessagesLoading(f),
       (msg, idx) => {
         this.incomingMessages.push(msg)
         if (!this.historyFileIsLoading) {

frontend/app/player/web/managers/DOM/DOMManager.ts

@@ -56,10 +56,10 @@ export default class DOMManager extends ListWalker<Message> {
     private readonly screen: Screen,
     private readonly isMobile: boolean,
     public readonly time: number,
-    mm: MessageManager,
+    setCssLoading: ConstructorParameters<typeof StylesManager>[1],
   ) {
     super()
-    this.stylesManager = new StylesManager(screen, mm)
+    this.stylesManager = new StylesManager(screen, setCssLoading)
   }
 
   append(m: Message): void {

frontend/app/player/web/managers/DOM/StylesManager.ts

@@ -24,7 +24,7 @@ export default class StylesManager {
   private linkLoadPromises: Array<Promise<void>> = [];
   private skipCSSLinks: Array<string> = []; // should be common for all pages
 
-  constructor(private readonly screen: Screen, private readonly mm: MessageManager) {}
+  constructor(private readonly screen: Screen, private readonly setLoading: (flag: boolean) => void) {}
 
   reset():void {
     this.linkLoadingCount = 0;
@@ -38,7 +38,7 @@ export default class StylesManager {
     const promise = new Promise<void>((resolve) => {
       if (this.skipCSSLinks.includes(value)) resolve();
       this.linkLoadingCount++;
-      this.mm.setCSSLoading(true);
+      this.setLoading(true);
       const addSkipAndResolve = () => {
         this.skipCSSLinks.push(value); // watch out
         resolve()
@@ -57,7 +57,7 @@ export default class StylesManager {
       clearTimeout(timeoutId);
       this.linkLoadingCount--;
       if (this.linkLoadingCount === 0) {
-        this.mm.setCSSLoading(false);
+        this.setLoading(false);
       }
     });
     this.linkLoadPromises.push(promise);

frontend/app/player/web/managers/PagesManager.ts

@@ -10,14 +10,18 @@ import DOMManager from './DOM/DOMManager';
 export default class PagesManager extends ListWalker<DOMManager> {
 	private currentPage: DOMManager | null = null
 
-	constructor(private screen: Screen, private isMobile: boolean, private mm: MessageManager) { super() }
+	constructor(
+		private screen: Screen,
+		private isMobile: boolean,
+		private setCssLoading: ConstructorParameters<typeof DOMManager>[3],
+) { super() }
 
 	/*
 		Assumed that messages added in a correct time sequence.
 	*/
 	appendMessage(m: Message): void {
 		if (m.tp === MType.CreateDocument) {
-			super.append(new DOMManager(this.screen, this.isMobile, m.time, this.mm))
+			super.append(new DOMManager(this.screen, this.isMobile, m.time, this.setCssLoading))
 		}
 		if (this.last === null) {
 			// Log wrong