add hook to poll blueapi only when displayed

package.json

@@ -24,6 +24,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
+    "react-query": "^3.39.3",
     "stream": "^0.0.3"
   },
   "devDependencies": {

src/App.tsx

@@ -1,11 +1,9 @@
 import React from "react";
-import { Tabs, Tab, useTheme, Box, Stack } from "@mui/material";
+import { Tabs, Tab, useTheme, Box } from "@mui/material";
 import { DetectorMotionTabPanel } from "./screens/DetectorMotion";
 import { TestBoxesTabPanel } from "./screens/TestBoxes";
 import { OavMover } from "./screens/OavMover";
 import "./App.css";
-import { WorkerStatus } from "./components/WorkerStatus";
-import { SleepButton } from "./components/SleepButton";
 import { BlueApiInfo } from "./screens/BlueApiInfo";
 
 interface TabPanelProps {

src/main.tsx

@@ -6,6 +6,10 @@ import App from "./App.tsx";
 import { Provider } from "react-redux";
 import { store } from "@diamondlightsource/cs-web-lib";
 
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient();
+
 const theme = createTheme({ palette: { mode: "dark" } });
 
 const container = document.getElementById("root");
@@ -15,7 +19,9 @@ createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeProvider theme={theme}>
       <Provider store={store}>
-        <App />
+        <QueryClientProvider client={queryClient}>
+          <App />
+        </QueryClientProvider>
       </Provider>
     </ThemeProvider>
   </StrictMode>