Improve initial builder lists render desync

Author: Dorfieeee

rcongui/src/pages/settings/maps/MapFilter.jsx

@@ -47,32 +47,30 @@ export const MapFilter = ({ maps, onFilterChange }) => {
   const [selectedModes, setSelectedModes] = useState([]);
   const [selectedWeathers, setSelectedWeathers] = useState([]);
 
+  // Compute unique modes and weathers for dropdowns
   const allModes = useMemo(() => {
-    if (maps.length === 0) return ["warfare"]; // default value before maps load
     return Array.from(new Set(maps.map((map) => unifiedGamemodeName(map.game_mode)))).sort();
   }, [maps]);
 
   const allWeather = useMemo(() => {
-    if (maps.length === 0) return ["day"]; // default value before maps load
     return Array.from(new Set(maps.map((map) => map.environment))).sort();
   }, [maps]);
 
-  useEffect(() => {
-    // Filter map variants based on search term and filters
-    const filteredMaps = maps.filter((mapLayer) => {
-      const matchesSearch = mapLayer.map.pretty_name
-        .toLowerCase()
-        .includes(searchTerm.toLowerCase());
-      const matchesModes =
-        !selectedModes.length || selectedModes.includes(unifiedGamemodeName(mapLayer.game_mode));
-      const matchesWeather =
-        !selectedWeathers.length ||
-        selectedWeathers.includes(mapLayer.environment);
+  // Compute filtered maps based on filter criteria
+  const filteredMaps = useMemo(() => {
+    return maps.filter((mapLayer) => {
+      const matchesSearch = mapLayer.map.pretty_name.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesModes = !selectedModes.length || selectedModes.includes(unifiedGamemodeName(mapLayer.game_mode));
+      const matchesWeather = !selectedWeathers.length || selectedWeathers.includes(mapLayer.environment);
       return matchesSearch && matchesModes && matchesWeather;
     });
-    onFilterChange(filteredMaps);
   }, [maps, searchTerm, selectedModes, selectedWeathers]);
 
+  // Notify parent of filter changes
+  useEffect(() => {
+    onFilterChange(filteredMaps);
+  }, [filteredMaps, onFilterChange]);
+
   return (
     <Stack
       alignItems={"center"}

rcongui/src/pages/settings/maps/MapListBuilder.jsx

@@ -40,14 +40,15 @@ export function MapListBuilder({
   exclusive = false,
   actions,
 }) {
-  const [mapSelection, setMapSelection] = useState([]);
+  const [mapSelection, setMapSelection] = useState(selectedMaps.map(withSelectionId));
+  
   const mapOptions = useMemo(() => {
     if (!exclusive) return allMaps;
     const selectedIds = new Set(mapSelection.map((m) => m.id));
     const exclusiveOptions = allMaps.filter((m) => !selectedIds.has(m.id));
     return exclusiveOptions;
   }, [exclusive, allMaps, mapSelection]);
-
+  
   const [filteredMapOptions, setFilteredMapOptions] = useState(mapOptions);
 
   const theme = useTheme();
@@ -58,11 +59,9 @@ export function MapListBuilder({
   const isMapSelectionVisible =
     !isSmallScreen || (isSmallScreen && view === "map-selection");
 
-  // Set selection data when it's loaded
+  // Set selection data when it's changed by the parent
   useEffect(() => {
-    if (selectedMaps.length > 0) {
-      setMapSelection(selectedMaps.map(withSelectionId));
-    }
+    setMapSelection(selectedMaps.map(withSelectionId));
   }, [selectedMaps]);
 
   const handleViewChange = (e, newView) => {