From 8c1df8f829b80b2a74a91fee1c57e71b41265374 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Thu, 12 Jun 2025 17:02:26 +1000
Subject: [PATCH] fix (perf): background flickering on page load #305

---
 src/seqta/ui/ImageBackgrounds.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/seqta/ui/ImageBackgrounds.ts b/src/seqta/ui/ImageBackgrounds.ts
index 83b630fd..c20e5f11 100644
--- a/src/seqta/ui/ImageBackgrounds.ts
+++ b/src/seqta/ui/ImageBackgrounds.ts
@@ -20,6 +20,8 @@ export async function appendBackgroundToUI() {
   return;
 }
 
+let lastLoadedId: string | null = null;
+
 export async function loadBackground() {
   if (!isIndexedDBSupported()) {
     console.error("IndexedDB is not supported. Unable to load background.");
@@ -33,12 +35,21 @@ export async function loadBackground() {
       if (backgroundContainer) {
         backgroundContainer.remove();
       }
+      lastLoadedId = null;
       return;
     }
 
     const background = await getDataById(selectedBackgroundId);
     if (!background) return;
 
+    // Skip reload if background hasn't changed and media element already exists
+    if (
+      selectedBackgroundId === lastLoadedId &&
+      document.querySelector("#media-container > .background")
+    ) {
+      return;
+    }
+
     let backgroundContainer = document.querySelector(".imageBackground");
     if (!backgroundContainer) {
       backgroundContainer = document.createElement("div");
@@ -77,6 +88,7 @@ export async function loadBackground() {
     }
 
     mediaContainer.appendChild(mediaElement);
+    lastLoadedId = selectedBackgroundId;
   } catch (error) {
     console.error("Error loading background:", error);
   }