christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 10:55:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

perf: make filter dropdowns feel instant with useDeferredValue

Browse Source 
Use React's useDeferredValue to decouple UI responsiveness from
expensive data reprocessing. Checkboxes now update immediately on
click; filterData/filterAdsData/filterBsrData and all downstream
useMemos run as a low-priority background pass. Added local optimistic
state in MultiSelectDropdown as a belt-and-suspenders layer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-03-11 09:02:24 +01:00
co-authored by Claude Sonnet 4.6
parent 8e907f1dff
commit dcf77cad2d
2 changed files with 52 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+15 -14
View File
@@ -1,5 +1,5 @@
import React, { useState, useMemo, useEffect, useCallback, Suspense, lazy } from 'react';
import React, { useState, useMemo, useEffect, useCallback, Suspense, lazy, useDeferredValue } from 'react';
import FileUpload from './components/FileUpload';
import Dashboard from './components/Dashboard';
import FilterBar from './components/FilterBar';
@@ -82,6 +82,7 @@ const App: React.FC = () => {
woc: [],
bulkSearch: '',
});
const deferredFilters = useDeferredValue(filters);
const top50Mode = useMemo(() => {
const hasUK = filters.customer.includes('Amazon UK');
@@ -525,8 +526,8 @@ const App: React.FC = () => {
return metaMap;
}, [rawData]);
const filteredData = useMemo(() => filterData(rawData, filters, stockMap, vendorStockMap, top50Mode), [rawData, filters, stockMap, vendorStockMap, top50Mode]);
const filteredAdsData = useMemo(() => filterAdsData(adsData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]);
const filteredAdsData = useMemo(() => filterAdsData(adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]);
// Calculate country-aware Top 50 Best Sellers for 2025
@@ -565,8 +566,8 @@ const App: React.FC = () => {
// Derived Data for Vendor (BSR)
const filteredBsrData = useMemo(() => {
return filterBsrData(bsrData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode);
}, [bsrData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
return filterBsrData(bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode);
}, [bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
// Combine Sales & Ads Data dynamically based on current filters
const combinedAdsData = useMemo(() => {
@@ -595,7 +596,7 @@ const App: React.FC = () => {
// Only apply the "Max Week" cutoff if the user has NOT explicitly selected a specific time period.
// If Month or Week filters are active, we show exactly what was asked (e.g., Full Year 2024).
// If no time filters are active, we default to YTD (Like-for-Like) comparison.
const isTimeFilterActive = filters.month.length > 0 || filters.week.length > 0;
const isTimeFilterActive = deferredFilters.month.length > 0 || deferredFilters.week.length > 0;
if (!combinedAdsData) return [];
@@ -607,25 +608,25 @@ const App: React.FC = () => {
if (!item.week) return true;
return item.week <= gridContext.maxWeek;
});
}, [combinedAdsData, gridContext.maxWeek, filters.month, filters.week]);
}, [combinedAdsData, gridContext.maxWeek, deferredFilters.month, deferredFilters.week]);
// Derived Data for Dashboard (YTD Filtered - Isolated)
// Dashboard needs aggregated data respecting the max week limit of current year.
// Dashboard needs aggregated data respecting the max week limit of current year...
// UNLESS the user explicitly filters for a period.
const ytdFilteredData = useMemo(() => {
const isTimeFilterActive = filters.month.length > 0 || filters.week.length > 0;
const isTimeFilterActive = deferredFilters.month.length > 0 || deferredFilters.week.length > 0;
if (isTimeFilterActive) return filteredData;
return filteredData.filter(r => r.week <= gridContext.maxWeek);
}, [filteredData, gridContext.maxWeek, filters.month, filters.week]);
}, [filteredData, gridContext.maxWeek, deferredFilters.month, deferredFilters.week]);
const ytdFilteredAdsData = useMemo(() => {
const isTimeFilterActive = filters.month.length > 0 || filters.week.length > 0;
const isTimeFilterActive = deferredFilters.month.length > 0 || deferredFilters.week.length > 0;
if (isTimeFilterActive) return filteredAdsData;
return filteredAdsData.filter(r => r.week <= gridContext.maxWeek);
}, [filteredAdsData, gridContext.maxWeek, filters.month, filters.week]);
}, [filteredAdsData, gridContext.maxWeek, deferredFilters.month, deferredFilters.week]);
const ytdAggregatedData = useMemo(() => {
return aggregateData(ytdFilteredData);
@@ -637,7 +638,7 @@ const App: React.FC = () => {
// Derive Context Data (Product Line Context when drilling down)
const contextAggregatedData = useMemo(() => {
// Check if we are filtering by specific items (SKU, ASIN, Title)
const hasItemFilters = filters.sku.length > 0 || filters.asin.length > 0 || filters.title.length > 0;
const hasItemFilters = deferredFilters.sku.length > 0 || deferredFilters.asin.length > 0 || deferredFilters.title.length > 0;
if (!hasItemFilters || filteredData.length === 0) {
return null;
@@ -648,7 +649,7 @@ const App: React.FC = () => {
// 2. Create a "broad" filter: Keep Year/Customer/Month, but CLEAR Item filters, and restrict to these Lines
const contextFilters: FilterState = {
...filters,
...deferredFilters,
line: activeLines, // Force these lines
sku: [], // Clear specific item filters
asin: [],
@@ -660,7 +661,7 @@ const App: React.FC = () => {
const broadData = filterData(rawData, contextFilters);
return aggregateData(broadData);
}, [rawData, filters, filteredData]);
}, [rawData, deferredFilters, filteredData]);
// Derive Options for Filter Dropdowns
components/MultiSelectDropdown.tsx
+37 -34
View File
@@ -15,9 +15,16 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
const [isOpen, setIsOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [rangeInput, setRangeInput] = useState('');
// Local optimistic state so checkboxes respond instantly on click
const [localSelected, setLocalSelected] = useState(selected);
const dropdownRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
// Sync local state when committed prop changes (after deferred update settles)
useEffect(() => {
setLocalSelected(selected);
}, [selected]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -52,36 +59,29 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
}, [options, searchTerm]);
const toggleOption = (option: string) => {
if (selected.includes(option)) {
onChange(selected.filter((item) => item !== option));
} else {
onChange([...selected, option]);
}
const next = localSelected.includes(option)
? localSelected.filter((item) => item !== option)
: [...localSelected, option];
setLocalSelected(next);
onChange(next);
};
const handleSelectAll = () => {
// If searching, only select/deselect visible options
let next: string[];
if (searchTerm) {
const allFilteredSelected = filteredOptions.every(opt => selected.includes(opt));
if (allFilteredSelected) {
// Deselect all filtered options
onChange(selected.filter(item => !filteredOptions.includes(item)));
} else {
// Select all filtered options (add unique ones)
const newSelected = Array.from(new Set([...selected, ...filteredOptions]));
onChange(newSelected);
}
const allFilteredSelected = filteredOptions.every(opt => localSelected.includes(opt));
next = allFilteredSelected
? localSelected.filter(item => !filteredOptions.includes(item))
: Array.from(new Set([...localSelected, ...filteredOptions]));
} else {
// Standard behavior
if (selected.length === options.length) {
onChange([]); // Deselect all
} else {
onChange([...options]); // Select all
}
next = localSelected.length === options.length ? [] : [...options];
}
setLocalSelected(next);
onChange(next);
};
const handleClear = () => {
setLocalSelected([]);
onChange([]);
};
@@ -135,12 +135,12 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
<button
onClick={() => setIsOpen(!isOpen)}
className={`w-full text-left bg-surface border border-border hover:border-slate-600 text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors flex justify-between items-center
${selected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
${localSelected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
>
<span className="truncate">
{selected.length === 0
{localSelected.length === 0
? (label === 'Customer' ? 'All Customers' : `All ${label}s`)
: `${selected.length} selected`}
: `${localSelected.length} selected`}
</span>
<svg className={`fill-current h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
@@ -190,19 +190,22 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
termsLower.some(t => opt.toLowerCase() === t || opt.toLowerCase().includes(t))
);
if (matched.length > 0) {
onChange(Array.from(new Set([...selected, ...matched])));
const next = Array.from(new Set([...localSelected, ...matched]));
setLocalSelected(next);
onChange(next);
}
setIsOpen(false);
setSearchTerm('');
} else if (filteredOptions.length > 0) {
const allSelected = filteredOptions.every(opt => selected.includes(opt));
const allSelected = filteredOptions.every(opt => localSelected.includes(opt));
let next: string[];
if (allSelected) {
// Deselect all filtered
onChange(selected.filter(item => !filteredOptions.includes(item)));
next = localSelected.filter(item => !filteredOptions.includes(item));
} else {
// Select all filtered
onChange(Array.from(new Set([...selected, ...filteredOptions])));
next = Array.from(new Set([...localSelected, ...filteredOptions]));
}
setLocalSelected(next);
onChange(next);
setIsOpen(false);
setSearchTerm('');
}
@@ -236,8 +239,8 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
<div className="flex justify-between py-2 px-2 border-b border-slate-800 bg-slate-900/50">
<button onClick={handleSelectAll} className="text-xs text-primary hover:text-indigo-400 font-medium px-2">
{searchTerm
? (filteredOptions.every(opt => selected.includes(opt)) ? 'Unselect Results' : 'Select Results')
: (selected.length === options.length ? 'Unselect All' : 'Select All')
? (filteredOptions.every(opt => localSelected.includes(opt)) ? 'Unselect Results' : 'Select Results')
: (localSelected.length === options.length ? 'Unselect All' : 'Select All')
}
</button>
<button onClick={handleClear} className="text-xs text-slate-400 hover:text-white px-2">
@@ -250,11 +253,11 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
<label key={opt} className="flex items-center space-x-3 p-2.5 md:p-2 rounded hover:bg-slate-800 active:bg-slate-700 cursor-pointer group">
<input
type="checkbox"
checked={selected.includes(opt)}
checked={localSelected.includes(opt)}
onChange={() => toggleOption(opt)}
className="form-checkbox h-5 w-5 md:h-4 md:w-4 text-primary rounded border-slate-600 bg-slate-800 focus:ring-primary focus:ring-offset-slate-900 transition duration-150 ease-in-out"
/>
<span className={`text-sm break-all group-hover:text-white ${selected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
<span className={`text-sm break-all group-hover:text-white ${localSelected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
{opt}
</span>
</label>