add loading spinners

src/components/CitySelectionDialog.tsx

@@ -31,7 +31,14 @@ export function CitySelectionDialog({
   const { data: cities, isLoading } = useGetCityListWithBannerQuery({ search })
 
   if (isLoading) {
-    return <div>Loading...</div>
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#F95F62] mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
   }
 
 

src/components/LandingUpcomingCities.tsx

@@ -113,8 +113,15 @@ export function LandingUpcomingCities() {
 
   const { data, isLoading } = useGetUpcomingCitiesQuery(listType)
 
-  if(isLoading){
-    return <div>Loading...</div>
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#F95F62] mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
   }
 
   const handleMouseDown = (e: React.MouseEvent) => {