Mk
/
supersam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: SMS dropdown text fits, align hide toggle on row, no skeleton flash on toggle

This commit is contained in:
Hermes 2026-08-19 12:52:38 +02:00
parent 46fac18e28
commit ebff56c749
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/orders/OrderFilters.jsx
View File

@ -47,7 +47,7 @@ const DropdownSelect = ({ value, options, onChange, placeholder }) => {
{isOpen ? ( {isOpen ? (
<div <div
role="listbox" role="listbox"
className="absolute left-0 right-0 top-full z-20 mt-2 overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-dropdown-surface)] shadow-soft" className="absolute left-0 top-full z-20 mt-2 w-max min-w-full whitespace-nowrap overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-dropdown-surface)] shadow-soft"
> >
{options.map((option) => { {options.map((option) => {
const isSelected = option.value === value; const isSelected = option.value === value;
@ -206,7 +206,7 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
</div> </div>
{/* Row 2: Date range + SMS problems (width matches its text) + hide-completed toggle */} {/* Row 2: Date range + SMS problems (width matches its text) + hide-completed toggle */}
<div className="flex flex-wrap items-end gap-3"> <div className="flex flex-wrap items-center gap-3">
<DatePicker <DatePicker
value={filters.dateFrom || ""} value={filters.dateFrom || ""}
onChange={(v) => updateFilter("dateFrom", v)} onChange={(v) => updateFilter("dateFrom", v)}

11
src/hooks/useOrderGroups.js
View File

@ -92,13 +92,22 @@ export const useOrderGroups = ({
}, [enabled, details, groupId, hideCompleted]); }, [enabled, details, groupId, hideCompleted]);
// Initial load // Initial load
const hasLoadedRef = React.useRef(false);
React.useEffect(() => { React.useEffect(() => {
let cancelled = false; let cancelled = false;
const doLoad = async () => { const doLoad = async () => {
const isFirst = !hasLoadedRef.current;
if (isFirst) {
const hasCache = !!readOrderGroupsCache(details, hideCompleted); const hasCache = !!readOrderGroupsCache(details, hideCompleted);
// If we seeded from cache, don't flash the spinner — refresh silently in bg. // Full skeleton only on the very first entry; otherwise refresh silently
// so toggling the "hide completed" switch updates the list in place
// without flashing the whole page / jumping to top.
setIsLoading(!hasCache); setIsLoading(!hasCache);
await loadLiveData(!hasCache, { forceRefresh: true }); await loadLiveData(!hasCache, { forceRefresh: true });
hasLoadedRef.current = true;
} else {
await loadLiveData(false, { forceRefresh: true });
}
if (cancelled) return; if (cancelled) return;
}; };
if (enabled) doLoad(); else { setOrderGroups([]); setIsLoading(false); } if (enabled) doLoad(); else { setOrderGroups([]); setIsLoading(false); }