fix polling of running state

Author: christianalfoni

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sdk",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "description": "The CodeSandbox SDK",
   "author": "CodeSandbox",
   "license": "MIT",

src/bin/main.tsx

@@ -9,7 +9,12 @@ import { hostTokensCommand } from "./commands/hostTokens";
 import { Dashboard } from "./ui/Dashboard";
 import React from "react";
 import { SDKProvider } from "./ui/sdkContext";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  focusManager,
+  onlineManager,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 
 if (process.argv.length === 2) {
   // Clear the screen before rendering the dashboard

src/bin/ui/Dashboard.tsx

@@ -25,14 +25,24 @@ export function Dashboard() {
   const runningVmsQuery = useQuery({
     queryKey: ["runningVms"],
     queryFn: getRunningVms,
-    refetchInterval: 2000, // Poll every 2 seconds
   });
 
   const [sandboxId, setSandboxId] = useState("");
   const [showSandbox, setShowSandbox] = useState(false);
   const [isFocused, setIsFocused] = useState(true);
   const [stdoutWidth, stdoutHeight] = useTerminalSize();
 
+  useEffect(() => {
+    // have to manually do this because of environment
+    const interval = setInterval(() => {
+      runningVmsQuery.refetch();
+    }, 2000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
   useInput((input, key) => {
     if (!showSandbox) {
       if (key.return) {
@@ -49,7 +59,7 @@ export function Dashboard() {
   });
 
   if (showSandbox) {
-    const state = runningVmsQuery.isFetching
+    const state = runningVmsQuery.isLoading
       ? "PENDING"
       : runningVmsQuery.data?.vms.find((vm) => vm.id === sandboxId)
       ? "RUNNING"