📺 demo-ready

jupyter-book · May 29, 2023 · f585c7a · f585c7a
1 parent 3e08359
commit f585c7a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/site/src/components/EnableCompute.tsx b/packages/site/src/components/EnableCompute.tsx
@@ -1,6 +1,11 @@
 import { useNotebook, useThebeCore, useThebeServer, useThebeSession } from 'thebe-react';
 import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
-import { useHasNotebookProvider, useComputeOptions, useNotebookLoader } from '@myst-theme/jupyter';
+import {
+  useHasNotebookProvider,
+  useComputeOptions,
+  useNotebookLoader,
+  useNotebookExecution,
+} from '@myst-theme/jupyter';
 import { useNavigation } from '@remix-run/react';
 import { useEffect, useState } from 'react';
 import { LiteLogo } from './liteLogo';
@@ -12,6 +17,7 @@ export function EnableCompute({
   const { load, loading, core } = useThebeCore();
   const { connect, connecting, ready: serverReady, error: serverError } = useThebeServer();
   const { thebe } = useComputeOptions();
+  const { executing } = useNotebookExecution();
   const {
     start,
     starting,
@@ -61,7 +67,7 @@ export function EnableCompute({
   return (
     <div className="flex mx-1 items-center">
       {thebe?.useJupyterLite && (
-        <span className={enabled || enabling ? 'animate-pulse' : ''}>
+        <span className={enabling || connecting || starting || executing ? 'animate-pulse' : ''}>
           <LiteLogo />
         </span>
       )}

diff --git a/packages/site/src/components/liteLogo.tsx b/packages/site/src/components/liteLogo.tsx
@@ -6,15 +6,15 @@ export function LiteLogo({ size }: { size?: number }) {
       height={size ?? 24}
       viewBox="0 0 17.992 17.992"
     >
-      <circle cx="8.996" cy="7.056" r="6.598" fill="#f7dc1e" paint-order="markers stroke fill" />
+      <circle cx="8.996" cy="7.056" r="6.598" fill="#f7dc1e" paintOrder="markers stroke fill" />
       <rect
         width="5.653"
         height="1.01"
         x="6.1"
         y="13.767"
         rx=".413"
         fill="#9e9e9e"
-        paint-order="stroke fill markers"
+        paintOrder="stroke fill markers"
       />
       <rect
         y="15.094"
@@ -23,7 +23,7 @@ export function LiteLogo({ size }: { size?: number }) {
         width="5.641"
         rx=".421"
         fill="#767677"
-        paint-order="stroke fill markers"
+        paintOrder="stroke fill markers"
       />
       <rect
         width="3.24"
@@ -32,13 +32,13 @@ export function LiteLogo({ size }: { size?: number }) {
         y="16.442"
         rx=".417"
         fill="#616262"
-        paint-order="stroke fill markers"
+        paintOrder="stroke fill markers"
       />
       <g fill="#1a1a1a">
         <path d="M11.116 11.264q-.996-.041-1.476-1.215-.356-.885-.356-2.166 0-.066.008-.169.058-.872.322-1.6.43-1.174 1.215-1.174.041 0 .087.004.715.045.715.831 0 .856-.736 1.902-.467.666-.98 1.079.141.785.31 1.178.314.728.934.728.041 0 .087-.008.136-.025.38-.198.236-.161.368-.161.058 0 .112.037.12.083.12.223-.008.215-.306.442-.372.269-.806.269zm-.281-5.701q-.244.004-.43.211-.471.533-.517 2.228.248-.252.496-.595.686-.938.686-1.583 0-.033-.017-.079-.066-.182-.219-.182z" />
         <path
           d="M9.049 4.638c0 .184-.073.361-.203.491s-.307.203-.491.203c-.383 0-.694-.311-.694-.694s.311-.694.694-.694.694.311.694.694z"
-          paint-order="markers stroke fill"
+          paintOrder="markers stroke fill"
         />
         <path d="M8.206 5.642q.269.004.277.351l-.459 3.282q1.034-.79 1.162-.893.153-.132.314-.136.058 0 .112.037.12.083.12.211-.004.198-.223.384-.608.513-1.608 1.261l-.19 1.368q-.012.095-.037.186-.19.728-.955.728-.38 0-.67-.285-.285-.285-.285-.641 0-.372.178-.612.099-.124.389-.339l.992-.744q.525-3.469.537-3.646 0-.025.004-.045.045-.467.343-.467zm-1.087 5.536q0 0 .07-.504l-.459.351q-.298.223-.302.422 0 .07.025.132.07.182.265.182.079 0 .141-.025.198-.087.26-.558zm.897-6.325q0-.074.037-.141.087-.161.269-.161.074 0 .145.037.157.087.157.265 0 .074-.037.145-.087.157-.265.157-.074 0-.145-.037-.161-.083-.161-.265z" />
       </g>