Merge pull request #542 from tidalcycles/loading-animation

feat: add loader bar to animate loading state

website/src/repl/Loader.jsx

@@ -0,0 +1,13 @@
+import { cx } from '@strudel.cycles/react';
+import React from 'react';
+
+function Loader({ active }) {
+  return (
+    <div className="overflow-hidden opacity-50 fixed top-0 left-0 w-full z-[1000]">
+      <div className={cx('h-[2px] block w-full', active ? 'bg-foreground animate-train' : 'bg-transparent')}>
+        <div />
+      </div>
+    </div>
+  );
+}
+export default Loader;

website/src/repl/Repl.jsx

@@ -18,6 +18,7 @@ import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
 import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
+import Loader from './Loader';
 
 const { latestCode } = settingsMap.get();
 
@@ -260,6 +261,7 @@ export function Repl({ embedded = false }) {
           //        'bg-gradient-to-t from-green-900 to-slate-900', //
         )}
       >
+        <Loader active={pending} />
         <Header context={context} />
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
           <CodeMirror

website/tailwind.config.cjs

@@ -10,6 +10,15 @@ module.exports = {
   ],
   theme: {
     extend: {
+      keyframes: {
+        train: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+      },
+      animation: {
+        train: 'train 2s linear infinite',
+      },
       colors: {
         // codemirror-theme settings
         background: 'var(--background)',