Merged in fix/switch-to-useQuery-over-useSuspenseQuery (pull request #1495)

fix: switch to using useQuery over useSuspenseQuery for booking widget

* fix: switch to using useQuery over useSuspenseQuery for booking widget


Approved-by: Linus Flood

apps/scandic-web/components/BookingWidget/Client.tsx

@@ -41,7 +41,13 @@ export default function BookingWidgetClient({
   const [isOpen, setIsOpen] = useState(false)
   const bookingWidgetRef = useRef(null)
   const lang = useLang()
-  const [locations] = trpc.hotel.locations.get.useSuspenseQuery({ lang })
+  const {
+    data: locations,
+    isLoading,
+    isSuccess,
+  } = trpc.hotel.locations.get.useQuery({
+    lang,
+  })
 
   useStickyPosition({
     ref: bookingWidgetRef,
@@ -72,9 +78,9 @@ export default function BookingWidgetClient({
   let selectedLocation: Location | null = null
 
   if (params.hotelId) {
-    selectedLocation = getLocationObj(locations, params.hotelId)
+    selectedLocation = getLocationObj(locations ?? [], params.hotelId)
   } else if (params.city) {
-    selectedLocation = getLocationObj(locations, params.city)
+    selectedLocation = getLocationObj(locations ?? [], params.city)
   }
 
   const selectedBookingCode = params.bookingCode ?? ""
@@ -173,6 +179,15 @@ export default function BookingWidgetClient({
     }
   }, [methods, selectedBookingCode])
 
+  if (isLoading) {
+    return <BookingWidgetSkeleton />
+  }
+
+  if (!isSuccess || !locations) {
+    // TODO: handle error cases
+    return null
+  }
+
   return (
     <FormProvider {...methods}>
       <section