Merge pull request #261 from Zagrios/hotfix/avoid-useless-maps-load

[hotfix] avoid useless maps loading when going directly to mods or models

src/main/main.ts

@@ -46,7 +46,7 @@ const installExtensions = async () => {
     const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
     const extensions = ['REACT_DEVELOPER_TOOLS'];
 
-    return installer.default(extensions.map((name) => installer[name]), forceDownload).catch(console.log);
+    return installer.default(extensions.map((name) => installer[name]), forceDownload).catch(console.error);
 };
 
 const createWindow = async (window: AppWindow = "launcher.html") => {

src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx

@@ -4,7 +4,6 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useSta
 import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface"
 import { Subscription } from "rxjs"
 import { MapFilter } from "shared/models/maps/beat-saver.model"
-import { useInView } from "framer-motion"
 import { MapsDownloaderService } from "renderer/services/maps-downloader.service"
 import { VariableSizeList } from "react-window"
 import { MapsRow } from "./maps-row.component"
@@ -18,16 +17,18 @@ import BeatConflict from "../../../../assets/images/apngs/beat-conflict.png"
 import { BsmImage } from "../shared/bsm-image.component"
 import { BsmButton } from "../shared/bsm-button.component"
 import TextProgressBar from "../progress-bar/text-progress-bar.component"
+import { useChangeOnce } from "renderer/hooks/use-change-once.hook"
 
 type Props = {
     version: BSVersion,
     className?: string,
     filter?: MapFilter
     search?: string,
-    linked?: boolean
+    linked?: boolean,
+    isActive?: boolean
 }
 
-export const LocalMapsListPanel = forwardRef(({version, className, filter, search, linked} : Props, forwardRef) => {
+export const LocalMapsListPanel = forwardRef(({version, className, filter, search, linked, isActive} : Props, forwardRef) => {
 
     const mapsManager = MapsManagerService.getInstance();
     const mapsDownloader = MapsDownloaderService.getInstance();
@@ -35,13 +36,13 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
     const os = OsDiagnosticService.getInstance();
 
     const t = useTranslation();
-    const ref = useRef(null)
-    const isVisible = useInView(ref, {once: true, amount: .5});
+    const ref = useRef(null);
     const [maps, setMaps] = useState<BsmLocalMap[]>(null);
     const [subs] = useState<Subscription[]>([]);
     const [selectedMaps$] = useState(new BehaviorSubject<BsmLocalMap[]>([]));
     const [itemPerRow, setItemPerRow] = useState(2);
     const [listHeight, setListHeight] = useState(0);
+    const isActiveOnce = useChangeOnce(isActive);
 
     const [loadPercent$] = useState(new BehaviorSubject(0));
 
@@ -64,7 +65,7 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
 
     useEffect(() => {
 
-        if(isVisible){
+        if(isActiveOnce){
             loadMaps();
             mapsDownloader.addOnMapDownloadedListener((map, targerVersion) => {
                 if(targerVersion !== version){ return; }
@@ -78,11 +79,11 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
             subs.forEach(s => s.unsubscribe());
             mapsDownloader.removeOnMapDownloadedListener(loadMaps);
         }
-    }, [isVisible, version, linked]);
+    }, [isActiveOnce, version, linked]);
 
     useEffect(() => {
         
-        if(!isVisible){ return () => {}; }
+        if(!isActiveOnce){ return; }
 
         const updateItemPerRow = (listWidth: number) => {
             const newPerRow = Math.min(Math.floor(listWidth / 400), 3);
@@ -106,7 +107,7 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
             sub.unsubscribe();
         }
 
-    }, [isVisible, itemPerRow])
+    }, [isActiveOnce, itemPerRow])
 
     const loadMaps = () => {
 

src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx

@@ -21,10 +21,11 @@ import { VersionFolderLinkerService, VersionLinkerActionListener } from "rendere
 
 
 type Props = {
-    version?: BSVersion
+    version?: BSVersion,
+    isActive?: boolean
 }
 
-export function MapsPlaylistsPanel({version}: Props) {
+export function MapsPlaylistsPanel({version, isActive}: Props) {
 
     const mapsService = MapsManagerService.getInstance();
     const mapsDownloader = MapsDownloaderService.getInstance();
@@ -63,7 +64,7 @@ export function MapsPlaylistsPanel({version}: Props) {
             linker.removeVersionFolderUnlinkedListener(onMapsLinked);
         }
 
-    }, [version]);
+    }, [version, isActive]);
 
     const loadMapIsLinked = () => {
         mapsService.versionHaveMapsLinked(version).then(setMapsLinked);
@@ -160,7 +161,7 @@ export function MapsPlaylistsPanel({version}: Props) {
             <div className="w-full h-full flex flex-col bg-light-main-color-3 dark:bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
                 <TabNavBar className="!rounded-none shadow-sm" tabIndex={tabIndex} tabsText={["misc.maps", "misc.playlists"]} onTabChange={setTabIndex} renderTab={renderTab}/>
                 <div className="w-full grow min-h-0 flex flex-row items-center transition-transform duration-300" style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
-                    <LocalMapsListPanel ref={mapsRef} className="w-full h-full shrink-0 flex flex-col" version={version} filter={mapFilter} search={mapSearch} linked={mapsLinked}/>
+                    <LocalMapsListPanel isActive={isActive && tabIndex === 0} ref={mapsRef} className="w-full h-full shrink-0 flex flex-col" version={version} filter={mapFilter} search={mapSearch} linked={mapsLinked}/>
                     <div className="w-full h-full shrink-0 flex flex-col justify-center items-center content-center gap-2 overflow-hidden text-gray-800 dark:text-gray-200">
                         <BsmImage className="rounded-md" image={wipGif}/>
                         <span>Coming soon</span>

src/renderer/components/shared/bsm-button.component.tsx

@@ -41,7 +41,6 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
 
     const textColor = (() => {
         if(primaryColor){
-            console.log(getCorrectTextColor(primaryColor), text);
             return getCorrectTextColor(primaryColor); 
         }
         return typeColor ? "white" : undefined;

src/renderer/hooks/use-change-once.hook.ts

@@ -0,0 +1,17 @@
+import equal from "fast-deep-equal";
+import { useEffect, useRef, useState } from "react";
+
+export function useChangeOnce<T = unknown>(initialValue: T): T {
+    const [trackedValue, setTrackedValue] = useState<T>(initialValue);
+    const didChangeOnceRef = useRef<boolean>(false);
+
+    useEffect(() => {
+        if(didChangeOnceRef.current || equal(initialValue, trackedValue)){ return; }
+
+        setTrackedValue(() => initialValue);
+        didChangeOnceRef.current = true;
+
+    }, [initialValue]);
+
+    return trackedValue;
+}

src/renderer/pages/version-viewer.component.tsx

@@ -80,7 +80,7 @@ export function VersionViewer() {
         <div className='w-full min-h-0 grow flex transition-transform duration-300' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
           <LaunchSlide version={state}/>
           <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
-            <MapsPlaylistsPanel version={state}/>
+            <MapsPlaylistsPanel version={state} isActive={currentTabIndex === 1}/>
           </div>
           <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
             <ModelsPanel version={state} isActive={currentTabIndex === 2} goToMods={() => setCurrentTabIndex(() => 3)}/>