Settings / Wallpapers: Fix auto-selecting random wallpaper (#2921)

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}

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]);