christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:35: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 FileUpload from './components/FileUpload';
import Dashboard from './components/Dashboard'; import Dashboard from './components/Dashboard';
import FilterBar from './components/FilterBar'; import FilterBar from './components/FilterBar';
@@ -82,6 +82,7 @@ const App: React.FC = () => {
woc: [], woc: [],
bulkSearch: '', bulkSearch: '',
}); });
const deferredFilters = useDeferredValue(filters);
const top50Mode = useMemo(() => { const top50Mode = useMemo(() => {
const hasUK = filters.customer.includes('Amazon UK'); const hasUK = filters.customer.includes('Amazon UK');
@@ -525,8 +526,8 @@ const App: React.FC = () => {
return metaMap; return metaMap;
}, [rawData]); }, [rawData]);
const filteredData = useMemo(() => filterData(rawData, filters, stockMap, vendorStockMap, top50Mode), [rawData, filters, stockMap, vendorStockMap, top50Mode]); const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]);
const filteredAdsData = useMemo(() => filterAdsData(adsData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, filters, globalAsinMetadata, 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]); const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]);
// Calculate country-aware Top 50 Best Sellers for 2025 // Calculate country-aware Top 50 Best Sellers for 2025
@@ -565,8 +566,8 @@ const App: React.FC = () => {
// Derived Data for Vendor (BSR) // Derived Data for Vendor (BSR)
const filteredBsrData = useMemo(() => { const filteredBsrData = useMemo(() => {
return filterBsrData(bsrData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode); return filterBsrData(bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode);
}, [bsrData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]); }, [bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
// Combine Sales & Ads Data dynamically based on current filters // Combine Sales & Ads Data dynamically based on current filters
const combinedAdsData = useMemo(() => { 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. // 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 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. // 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 []; if (!combinedAdsData) return [];
@@ -607,25 +608,25 @@ const App: React.FC = () => {
if (!item.week) return true; if (!item.week) return true;
return item.week <= gridContext.maxWeek; 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) // 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.
// 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. // UNLESS the user explicitly filters for a period.
const ytdFilteredData = useMemo(() => { 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; if (isTimeFilterActive) return filteredData;
return filteredData.filter(r => r.week <= gridContext.maxWeek); 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 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; if (isTimeFilterActive) return filteredAdsData;
return filteredAdsData.filter(r => r.week <= gridContext.maxWeek); 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(() => { const ytdAggregatedData = useMemo(() => {
return aggregateData(ytdFilteredData); return aggregateData(ytdFilteredData);
@@ -637,7 +638,7 @@ const App: React.FC = () => {
// Derive Context Data (Product Line Context when drilling down) // Derive Context Data (Product Line Context when drilling down)
const contextAggregatedData = useMemo(() => { const contextAggregatedData = useMemo(() => {
// Check if we are filtering by specific items (SKU, ASIN, Title) // 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) { if (!hasItemFilters || filteredData.length === 0) {
return null; 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 // 2. Create a "broad" filter: Keep Year/Customer/Month, but CLEAR Item filters, and restrict to these Lines
const contextFilters: FilterState = { const contextFilters: FilterState = {
...filters, ...deferredFilters,
line: activeLines, // Force these lines line: activeLines, // Force these lines
sku: [], // Clear specific item filters sku: [], // Clear specific item filters
asin: [], asin: [],
@@ -660,7 +661,7 @@ const App: React.FC = () => {
const broadData = filterData(rawData, contextFilters); const broadData = filterData(rawData, contextFilters);
return aggregateData(broadData); return aggregateData(broadData);
}, [rawData, filters, filteredData]); }, [rawData, deferredFilters, filteredData]);
// Derive Options for Filter Dropdowns // 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 [isOpen, setIsOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [rangeInput, setRangeInput] = 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 dropdownRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
// Sync local state when committed prop changes (after deferred update settles)
useEffect(() => {
setLocalSelected(selected);
}, [selected]);
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -52,36 +59,29 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
}, [options, searchTerm]); }, [options, searchTerm]);
const toggleOption = (option: string) => { const toggleOption = (option: string) => {
if (selected.includes(option)) { const next = localSelected.includes(option)
onChange(selected.filter((item) => item !== option)); ? localSelected.filter((item) => item !== option)
} else { : [...localSelected, option];
onChange([...selected, option]); setLocalSelected(next);
} onChange(next);
}; };
const handleSelectAll = () => { const handleSelectAll = () => {
// If searching, only select/deselect visible options let next: string[];
if (searchTerm) { if (searchTerm) {
const allFilteredSelected = filteredOptions.every(opt => selected.includes(opt)); const allFilteredSelected = filteredOptions.every(opt => localSelected.includes(opt));
if (allFilteredSelected) { next = allFilteredSelected
// Deselect all filtered options ? localSelected.filter(item => !filteredOptions.includes(item))
onChange(selected.filter(item => !filteredOptions.includes(item))); : Array.from(new Set([...localSelected, ...filteredOptions]));
} else {
// Select all filtered options (add unique ones)
const newSelected = Array.from(new Set([...selected, ...filteredOptions]));
onChange(newSelected);
}
} else { } else {
// Standard behavior next = localSelected.length === options.length ? [] : [...options];
if (selected.length === options.length) {
onChange([]); // Deselect all
} else {
onChange([...options]); // Select all
}
} }
setLocalSelected(next);
onChange(next);
}; };
const handleClear = () => { const handleClear = () => {
setLocalSelected([]);
onChange([]); onChange([]);
}; };
@@ -135,12 +135,12 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
<button <button
onClick={() => setIsOpen(!isOpen)} 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 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"> <span className="truncate">
{selected.length === 0 {localSelected.length === 0
? (label === 'Customer' ? 'All Customers' : `All ${label}s`) ? (label === 'Customer' ? 'All Customers' : `All ${label}s`)
: `${selected.length} selected`} : `${localSelected.length} selected`}
</span> </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"> <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" /> <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)) termsLower.some(t => opt.toLowerCase() === t || opt.toLowerCase().includes(t))
); );
if (matched.length > 0) { 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); setIsOpen(false);
setSearchTerm(''); setSearchTerm('');
} else if (filteredOptions.length > 0) { } 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) { if (allSelected) {
// Deselect all filtered next = localSelected.filter(item => !filteredOptions.includes(item));
onChange(selected.filter(item => !filteredOptions.includes(item)));
} else { } else {
// Select all filtered next = Array.from(new Set([...localSelected, ...filteredOptions]));
onChange(Array.from(new Set([...selected, ...filteredOptions])));
} }
setLocalSelected(next);
onChange(next);
setIsOpen(false); setIsOpen(false);
setSearchTerm(''); 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"> <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"> <button onClick={handleSelectAll} className="text-xs text-primary hover:text-indigo-400 font-medium px-2">
{searchTerm {searchTerm
? (filteredOptions.every(opt => selected.includes(opt)) ? 'Unselect Results' : 'Select Results') ? (filteredOptions.every(opt => localSelected.includes(opt)) ? 'Unselect Results' : 'Select Results')
: (selected.length === options.length ? 'Unselect All' : 'Select All') : (localSelected.length === options.length ? 'Unselect All' : 'Select All')
} }
</button> </button>
<button onClick={handleClear} className="text-xs text-slate-400 hover:text-white px-2"> <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"> <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 <input
type="checkbox" type="checkbox"
checked={selected.includes(opt)} checked={localSelected.includes(opt)}
onChange={() => toggleOption(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" 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} {opt}
</span> </span>
</label> </label>