improve dom synchronization

client/presentationmgr.ts

@@ -3,7 +3,7 @@ import {
 } from "./pythagoras_client";
 import { ScrollingTextBox } from "./scrolling_textbox";
 import { dict, IDLE_LOGOS, QUESTION_LINK, QUESTION_QR } from "./settings";
-import { el, sleep } from "./tools";
+import { el, sleep, wait_for_dom_refresh } from "./tools";
 
 interface PresentationScreen {
 	prepare(): Promise<void>;
@@ -27,7 +27,7 @@ export class PresentationManager {
 		await this.screen.prepare();
 		this.dom_root.innerHTML = "";
 		this.dom_root.appendChild(this.screen.dom);
-		await sleep(10);
+		await wait_for_dom_refresh();
 	}
 
 	public async serve(ws_client: PythagorasClient): Promise<void> {
@@ -93,7 +93,7 @@ class MainScreen implements PresentationScreen {
 	}
 
 	public async start(): Promise<void> {
-		await sleep(10);
+		await wait_for_dom_refresh();
 		this.dom_root.style.opacity = "1";
 		await sleep(500);
 	}
@@ -198,7 +198,7 @@ class VideoScreen implements PresentationScreen {
 		this.dom_video.currentTime = seconds_from_start;
 		this.dom_root.innerHTML = "";
 		this.dom_root.appendChild(this.dom_video);
-		await sleep(10);
+		await wait_for_dom_refresh();
 		await this.start();
 	}
 
@@ -233,7 +233,7 @@ class IdleScreen implements PresentationScreen {
 	}
 
 	public async start(): Promise<void> {
-		await sleep(10);
+		await wait_for_dom_refresh();
 		this.dom_title.style.transform = "translateY(0)";
 		this.dom_title.style.opacity = "1";
 		await sleep(250);

client/tools.ts

@@ -31,6 +31,16 @@ export async function sleep(millis: number): Promise<void> {
 	});
 }
 
+export function wait_for_dom_refresh(): Promise<void> {
+	return new Promise<void>((resolver) => {
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				resolver();
+			});
+		});
+	});
+}
+
 export namespace el {
 	function add_classes(target: HTMLElement, classes?: string[]): void {
 		if (classes === undefined) { return; }