add pending flag

repl/src/App.tsx

@@ -37,11 +37,12 @@ const randomTune = getRandomTune();
 
 function App() {
   const [editor, setEditor] = useState<any>();
-  const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog } = useRepl({
-    tune: decoded || randomTune,
-    defaultSynth,
-    onDraw: useCallback(markEvent(editor), [editor]),
-  });
+  const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog, pending } =
+    useRepl({
+      tune: decoded || randomTune,
+      defaultSynth,
+      onDraw: useCallback(markEvent(editor), [editor]),
+    });
   const logBox = useRef<any>();
   // scroll log box to bottom when log changes
   useLayoutEffect(() => {
@@ -56,7 +57,6 @@ function App() {
         switch (e.code) {
           case 'Enter':
             await activateCode();
-            !cycle.started && cycle.start();
             break;
           case 'Period':
             cycle.stop();
@@ -133,7 +133,7 @@ function App() {
           className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
           onClick={() => togglePlay()}
         >
-          {cycle.started ? 'pause' : 'play'}
+          {!pending ? <>{cycle.started ? 'pause' : 'play'}</> : <>loading...</>}
         </button>
         <textarea
           className="grow bg-[#283237] border-0 text-xs min-h-[200px]"

repl/src/useRepl.ts

@@ -17,6 +17,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
   const [activeCode, setActiveCode] = useState<string>();
   const [log, setLog] = useState('');
   const [error, setError] = useState<Error>();
+  const [pending, setPending] = useState(false);
   const [hash, setHash] = useState('');
   const [pattern, setPattern] = useState<Pattern>();
   const dirty = code !== activeCode || error;
@@ -24,9 +25,11 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
   const activateCode = async (_code = code) => {
     if (activeCode && !dirty) {
       setError(undefined);
+      !cycle.started && cycle.start();
       return;
     }
     try {
+      setPending(true);
       const parsed = await evaluate(_code);
       !cycle.started && cycle.start();
       broadcast({ type: 'start', from: id });
@@ -37,6 +40,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
       setHash(generateHash());
       setError(undefined);
       setActiveCode(_code);
+      setPending(false);
     } catch (err: any) {
       err.message = 'evaluation error: ' + err.message;
       console.warn(err);
@@ -145,6 +149,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
   };
 
   return {
+    pending,
     code,
     setCode,
     pattern,