From 86c1c483d47cbcb26d30b558c5f7c87b5b2081b9 Mon Sep 17 00:00:00 2001
From: Enriquefft <enriquefft2001@gmail.com>
Date: Fri, 24 Apr 2026 18:22:27 -0500
Subject: [PATCH] avoid 404s on first swatch render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SettingsPanel fell back to rendering WALLPAPER_PATHS (raw
/wallpapers/*.jpg strings) during the brief window before the
resolveImageWallpaperUrl effect populated wallpaperPaths. In packaged
Electron the browser resolved those against a file:// origin, producing
18 ERR_FILE_NOT_FOUND requests per load / reload. The second render
replaced them with correct URLs, so swatches appeared — but the wasted
requests showed up in devtools and churned the network panel.

Drop the fallback; render nothing until the effect completes. The
resolution is effectively instant and avoids the empty-origin round
trip.
---
 src/components/video-editor/SettingsPanel.tsx | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index ec5ad0d..4ebdf33 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -1141,41 +1141,39 @@ export function SettingsPanel({
 												);
 											})}
 
-											{(wallpaperPaths.length > 0 ? wallpaperPaths : WALLPAPER_PATHS).map(
-												(path) => {
-													const isSelected = (() => {
-														if (!selected) return false;
-														if (selected === path) return true;
-														try {
-															const clean = (s: string) =>
-																s.replace(/^file:\/\//, "").replace(/^\//, "");
-															if (clean(selected).endsWith(clean(path))) return true;
-															if (clean(path).endsWith(clean(selected))) return true;
-														} catch {
-															// Best-effort comparison; fallback to strict match.
-														}
-														return false;
-													})();
-													return (
-														<div
-															key={path}
-															className={cn(
-																"aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
-																isSelected
-																	? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
-																	: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
-															)}
-															style={{
-																backgroundImage: `url(${path})`,
-																backgroundSize: "cover",
-																backgroundPosition: "center",
-															}}
-															onClick={() => onWallpaperChange(path)}
-															role="button"
-														/>
-													);
-												},
-											)}
+											{wallpaperPaths.map((path) => {
+												const isSelected = (() => {
+													if (!selected) return false;
+													if (selected === path) return true;
+													try {
+														const clean = (s: string) =>
+															s.replace(/^file:\/\//, "").replace(/^\//, "");
+														if (clean(selected).endsWith(clean(path))) return true;
+														if (clean(path).endsWith(clean(selected))) return true;
+													} catch {
+														// Best-effort comparison; fallback to strict match.
+													}
+													return false;
+												})();
+												return (
+													<div
+														key={path}
+														className={cn(
+															"aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
+															isSelected
+																? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
+																: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
+														)}
+														style={{
+															backgroundImage: `url(${path})`,
+															backgroundSize: "cover",
+															backgroundPosition: "center",
+														}}
+														onClick={() => onWallpaperChange(path)}
+														role="button"
+													/>
+												);
+											})}
 										</div>
 									</TabsContent>