From 617c6cee82fd40ba7e9db05fda74cf9fcec2ed17 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 18:49:14 +0700
Subject: [PATCH] =?UTF-8?q?fix(ux):=20Batch=20F=20part=201=20=E2=80=94=20f?=
 =?UTF-8?q?alse=20'no=20spots'=20while=20loading;=20calendar=20filter=20le?=
 =?UTF-8?q?ak?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 src/components/SpotPicker.tsx | 10 +++++++---
 src/pages/EventsPage.tsx      |  8 +++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/SpotPicker.tsx b/src/components/SpotPicker.tsx
index c24b6ed..939149e 100644
--- a/src/components/SpotPicker.tsx
+++ b/src/components/SpotPicker.tsx
@@ -23,7 +23,7 @@ export function SpotPicker({
   label = 'Spots Where You\'re Available',
   description = 'Select spots where you offer your services',
 }: SpotPickerProps) {
-  const { data: allSpots } = useSkateSpots(100);
+  const { data: allSpots, isLoading: spotsLoading } = useSkateSpots(100);
   const [searchQuery, setSearchQuery] = useState('');
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -176,11 +176,15 @@ export function SpotPicker({
                       </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">
                       No spots found. Try a different search.
                     </p>
-                  )}
+                  ) : null}
                 </div>
               </CardContent>
             </Card>
diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index 3027b04..1969db5 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -1157,7 +1157,13 @@ export default function EventsPage() {
                   <button
                     key={key}
                     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}
                     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',