adding in the lidar inventory control stuff

src/pages/Terminals.tsx

@@ -156,6 +156,7 @@ export default function Terminals(props: Props) {
   const [teamSharing, setTeamSharing] = useState(false);
   const [baseShareDialog, setBaseShareDialog] = useState(false);
   const [removeSelfDialog, setRemoveSelfDialog] = useState(false);
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     if (currentTerminal) {
@@ -178,13 +179,18 @@ export default function Terminals(props: Props) {
   }, [props.terminal]);
 
   const load = useCallback(() => {
+    if(loading) return
+    setLoading(true)
     terminalAPI.listTerminals(200, 0, "asc", "name").then(resp => {
       setTerminals(resp.data.terminals.map(a => Terminal.any(a)));
+    }).catch(err => {
+      console.log("There was a problem loading Terminals")
+    }).finally(() => {
+      setLoading(false)
     })
   }, [terminalAPI, openSnack]); //eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    //TODO: will need to figure out a way to prevent multiple api calls when loading the page
     load();
   }, [load]);
 
@@ -312,6 +318,7 @@ export default function Terminals(props: Props) {
   const terminalTabs = () => {
     return (
       <React.Fragment>
+        {/* TODO: convert this to use DraggableTabs */}
         <Tabs
           variant="scrollable"
           scrollButtons="auto"