From cd2a9092ed0d3ba69eea348bd30f6504ef15da40 Mon Sep 17 00:00:00 2001
From: Jonah <47046556+jwbonner@users.noreply.github.com>
Date: Thu, 12 Dec 2024 21:28:29 -0500
Subject: [PATCH] Fix visual glitches when loading joystick images

---
 src/shared/renderers/JoysticksRenderer.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/shared/renderers/JoysticksRenderer.ts b/src/shared/renderers/JoysticksRenderer.ts
index 8fe70832..3045c77a 100644
--- a/src/shared/renderers/JoysticksRenderer.ts
+++ b/src/shared/renderers/JoysticksRenderer.ts
@@ -11,12 +11,16 @@ export default class JoysticksRenderer implements TabRenderer {
   private WHITE_COLOR = "#eeeeee";
 
   private lastRenderState = "";
+  private imageLoadCount = 0;
 
   constructor(root: HTMLElement) {
     this.CANVAS = root.getElementsByTagName("canvas")[0] as HTMLCanvasElement;
     for (let i = 0; i < 6; i++) {
       let image = document.createElement("img");
       this.IMAGES.push(image);
+      image.addEventListener("load", () => {
+        this.imageLoadCount++;
+      });
     }
   }
 
@@ -38,7 +42,14 @@ export default class JoysticksRenderer implements TabRenderer {
     let isLight = !window.matchMedia("(prefers-color-scheme: dark)").matches;
 
     // Exit if render state unchanged
-    let renderState: any[] = [canvasWidth, canvasHeight, isLight, window.devicePixelRatio, command];
+    let renderState: any[] = [
+      canvasWidth,
+      canvasHeight,
+      isLight,
+      window.devicePixelRatio,
+      command,
+      this.imageLoadCount
+    ];
     let renderStateString = JSON.stringify(renderState);
     if (renderStateString === this.lastRenderState) {
       return;