fix(ux): Batch F part 1 — false 'no spots' while loading; calendar filter leak

- SpotPicker showed 'No spots found' during the initial load (also affected
  CreateListing); now shows a loading state first
- Events: switching to the calendar view clears the date-window filter, which
  only has chips in list view — it was silently hiding calendar events
This commit is contained in:
SkateSpots 2026-09-26 18:49:14 +07:00
parent 09e1612db7
commit 617c6cee82
2 changed files with 14 additions and 4 deletions

View file

@ -23,7 +23,7 @@ export function SpotPicker({
label = 'Spots Where You\'re Available', label = 'Spots Where You\'re Available',
description = 'Select spots where you offer your services', description = 'Select spots where you offer your services',
}: SpotPickerProps) { }: SpotPickerProps) {
const { data: allSpots } = useSkateSpots(100); const { data: allSpots, isLoading: spotsLoading } = useSkateSpots(100);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
@ -176,11 +176,15 @@ export function SpotPicker({
</button> </button>
); );
})} })}
{filteredSpots.length === 0 && ( {spotsLoading ? (
<p className="text-sm text-gray-500 text-center py-4">
Loading spots…
</p>
) : filteredSpots.length === 0 ? (
<p className="text-sm text-gray-400 text-center py-4"> <p className="text-sm text-gray-400 text-center py-4">
No spots found. Try a different search. No spots found. Try a different search.
</p> </p>
)} ) : null}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>

View file

@ -1157,7 +1157,13 @@ export default function EventsPage() {
<button <button
key={key} key={key}
type="button" type="button"
onClick={() => setLayout(key)} onClick={() => {
setLayout(key);
// The date-window chips only render in list view, so a
// window chosen there would silently keep filtering the
// calendar with no way to see or clear it.
if (key === 'calendar') setDateWindow('all');
}}
aria-pressed={active} aria-pressed={active}
className={cn( className={cn(
'flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-bold uppercase tracking-wide transition-all active:scale-95', 'flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-bold uppercase tracking-wide transition-all active:scale-95',