From e5ccb2344306095eb919b1ea425dbf6e5e58bceb Mon Sep 17 00:00:00 2001
From: Tristan Timblin <ttimblin@fiskerinc.com>
Date: Tue, 3 Oct 2023 09:14:05 -0700
Subject: [PATCH] CEC-4729: remove race-condition (#458)

* resolve localStorage race condition

* fix

* fix
---
 src/components/Cars/List/index.jsx   | 6 +++---
 src/components/Cars/List/useQuery.js | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 2d206e4..12bcb17 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -21,7 +21,7 @@ const MainForm = () => {
   const [online, setOnline] = useState(false);
   const [onlineHMI, setOnlineHMI] = useState(false);
   const [selectedVins, setSelectedVins] = useState([]);
-  const { vins, search, query, setQuery } = useQuery();
+  const { vins, search, query, setQuery, loading } = useQuery();
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -100,7 +100,7 @@ const MainForm = () => {
         </Grid>
         <Grid item md={2} className={classes.textRightAlign} />
       </Grid>
-      <CarSelectionTable
+      {!loading && <CarSelectionTable
         classes={classes}
         token={token}
         multiSelect
@@ -113,7 +113,7 @@ const MainForm = () => {
         selected={selectedVins}
         onSelect={handleSelect}
         onSelectAll={handleSelectAll}
-      />
+      />}
     </div>
   );
 };
diff --git a/src/components/Cars/List/useQuery.js b/src/components/Cars/List/useQuery.js
index 715c82b..ba1ca86 100644
--- a/src/components/Cars/List/useQuery.js
+++ b/src/components/Cars/List/useQuery.js
@@ -35,8 +35,9 @@ function parseQueryPart(part) {
 export default function useQuery() {
   const [query, setQuery] = useLocalStorage("VEHICLE_SEARCH", "");
   const [parts, setParts] = useState([]);
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState(null);
   const [vins, setVins] = useState("");
+  const [loading, setLoading] = useState(true);
 
   function reset() {
     setSearch("");
@@ -62,6 +63,8 @@ export default function useQuery() {
         setSearch(search => `${search} ${value}`.trim());
       }
     });
+
+    setLoading(false);
   }, [query]);
 
   return {
@@ -70,5 +73,6 @@ export default function useQuery() {
     vins,
     query,
     setQuery,
+    loading,
   }
 }