🛠improving binder connection cycle

jupyter-book · Nov 21, 2023 · 93c32dd · 93c32dd
1 parent 15589b9
commit 93c32dd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/apps/demo-react/src/Connect.tsx b/apps/demo-react/src/Connect.tsx
@@ -17,11 +17,16 @@ export function Connect() {
 
   return (
     <div className="my-2">
-      {!ready && (
+      {!connecting && !ready && (
         <button className="button" onClick={clickConnect} disabled={!core || connecting}>
           connect
         </button>
       )}
+      {connecting && (
+        <span className="inline-block h-[41px] bg-orange-500 text-white font-bold py-2 px-4 rounded-full">
+          connecting
+        </span>
+      )}
       {ready && (
         <span className="inline-block h-[41px] bg-green-500 text-white font-bold py-2 px-4 rounded-full">
           connected

diff --git a/apps/demo-react/src/NotebookPage.tsx b/apps/demo-react/src/NotebookPage.tsx
@@ -5,9 +5,9 @@ import { NotebookStatusTray } from './NotebookStatusTray';
 import { NotebookErrorTray } from './NotebookErrorTray';
 
 export function NotebookPage({ children }: React.PropsWithChildren) {
-  const { ready, config } = useThebeServer();
+  const { connecting, ready, config } = useThebeServer();
 
-  if (!ready) return null;
+  if (!connecting && !ready) return null;
   return (
     <ThebeRenderMimeRegistryProvider>
       <ThebeSessionProvider start path={config?.kernels.path}>

diff --git a/packages/react/src/ThebeServerProvider.tsx b/packages/react/src/ThebeServerProvider.tsx
@@ -84,7 +84,7 @@ export function ThebeServerProvider({
     setServer(svr);
   }, [core, thebeConfig, server]);
 
-  const connectToServer = useCallback(() => {
+  const connectToServer = () => {
     if (!server) return;
     setConnecting(true);
     if (customConnectFn) customConnectFn(server);
@@ -113,7 +113,7 @@ export function ThebeServerProvider({
     );
 
     return server.ready;
-  }, [server]);
+  };
 
   // Once the core is loaded, connect to a server
   // TODO: this should be an action not a side effect