From 297178d6ea944976a3229a47faab4ca6264e6508 Mon Sep 17 00:00:00 2001
From: David Ly <dly@acvauctions.com>
Date: Mon, 24 Jun 2024 08:43:42 +0200
Subject: [PATCH] Fixed vehicle type selection

---
 .../VehicleTypeSelection/VehicleTypeSelection.styles.ts   | 3 ++-
 .../VehicleTypeSelection/VehicleTypeSelection.tsx         | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.styles.ts b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.styles.ts
index f19626e98..72a891d9c 100644
--- a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.styles.ts
+++ b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.styles.ts
@@ -12,10 +12,11 @@ export const styles: Styles = {
   containerSmall: {
     __media: { maxWidth: 500 },
     gridTemplate: `'title' 0
-                  'slider' 1fr 
+                  'slider' 1fr
                   'button' 1fr/ auto`,
   },
   loadingContainer: {
+    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
diff --git a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx
index 7d5073875..9a2754f76 100644
--- a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx
+++ b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx
@@ -83,7 +83,7 @@ export const VehicleTypeSelection = i18nWrap((props: VehicleTypeSelectionProps)
     authToken: props.authToken ?? '',
     apiDomain: props.apiDomain ?? '',
   });
-  const loading = useLoadingState(true);
+  const loading = useLoadingState();
   const { handleError, setTags, setUserId } = useMonitoring();
   const analytics = useAnalytics();
   const [initialScroll, setInitialScroll] = useState(true);
@@ -112,17 +112,17 @@ export const VehicleTypeSelection = i18nWrap((props: VehicleTypeSelectionProps)
   }, [props.inspectionId, props.authToken, analytics, setTags, setUserId]);
 
   useEffect(() => {
+    loading.start();
     const fetchInspection = async () => {
       if (!props.inspectionId) {
         loading.onSuccess();
         return;
       }
-      loading.start();
       const fetchedInspection = await getInspection({
         id: props.inspectionId,
       });
       const vehicleType = getVehicleTypeFromInspection(fetchedInspection);
-      if (vehicleType && props.availableVehicleTypes?.includes(vehicleType)) {
+      if (vehicleType && vehicleTypes?.includes(vehicleType)) {
         props.onSelectVehicleType?.(vehicleType);
       }
       loading.onSuccess();
@@ -146,8 +146,8 @@ export const VehicleTypeSelection = i18nWrap((props: VehicleTypeSelectionProps)
       style={{
         ...rootStyles,
         ...styles['container'],
-        ...loadingContainer,
         ...responsive(styles['containerSmall']),
+        ...loadingContainer,
       }}
     >
       {loading.isLoading && <Spinner size={80} />}