CEC-4729: remove race-condition (#458)

* resolve localStorage race condition

* fix

* fix

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>
   );
 };

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,
   }
 }