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