From 91b06c6ec9532c68f690765c092c7aad1f5b5608 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 6 Apr 2023 08:20:28 +0200
Subject: [PATCH] Settings / Wallpapers: Fix auto-selecting random wallpaper
 (#2921)

---
 src/components/left/settings/SettingsGeneralBackground.tsx | 1 +
 src/components/left/settings/WallpaperTile.tsx             | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/left/settings/SettingsGeneralBackground.tsx b/src/components/left/settings/SettingsGeneralBackground.tsx
index 411fa1260..88eb3455a 100644
--- a/src/components/left/settings/SettingsGeneralBackground.tsx
+++ b/src/components/left/settings/SettingsGeneralBackground.tsx
@@ -154,6 +154,7 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
         <div className="settings-wallpapers">
           {loadedWallpapers.map((wallpaper) => (
             <WallpaperTile
+              key={wallpaper.slug}
               wallpaper={wallpaper}
               theme={theme}
               isSelected={background === wallpaper.slug}
diff --git a/src/components/left/settings/WallpaperTile.tsx b/src/components/left/settings/WallpaperTile.tsx
index ca8ef49bc..a90e8d31c 100644
--- a/src/components/left/settings/WallpaperTile.tsx
+++ b/src/components/left/settings/WallpaperTile.tsx
@@ -44,6 +44,7 @@ const WallpaperTile: FC<OwnProps> = ({
     undefined,
     'slow',
   );
+  const isLoadingRef = useRef(false);
   const [isLoadAllowed, setIsLoadAllowed] = useState(false);
   const {
     mediaData: fullMedia, loadProgress,
@@ -68,8 +69,10 @@ const WallpaperTile: FC<OwnProps> = ({
   }, [fullMedia, onClick, slug]);
 
   useEffect(() => {
-    if (fullMedia) {
+    // If we've clicked on a wallpaper, select it when full media is loaded
+    if (fullMedia && isLoadingRef.current) {
       handleSelect();
+      isLoadingRef.current = false;
     }
   }, [fullMedia, handleSelect]);
 
@@ -77,6 +80,7 @@ const WallpaperTile: FC<OwnProps> = ({
     if (fullMedia) {
       handleSelect();
     } else {
+      isLoadingRef.current = true;
       setIsLoadAllowed((isAllowed) => !isAllowed);
     }
   }, [fullMedia, handleSelect]);