From 17654b885b310f78295cf76b2b8c1f03590df0ae Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 24 Mar 2023 12:41:00 +0100
Subject: [PATCH] feat: add loader bar to animate loading state

---
 website/src/repl/Loader.jsx | 13 +++++++++++++
 website/src/repl/Repl.jsx   |  2 ++
 website/tailwind.config.cjs |  9 +++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 website/src/repl/Loader.jsx

diff --git a/website/src/repl/Loader.jsx b/website/src/repl/Loader.jsx
new file mode 100644
index 00000000..0c629402
--- /dev/null
+++ b/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;
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 70b5229e..67b368ad 100644
--- a/website/src/repl/Repl.jsx
+++ b/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
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 06ccbc18..d92d5949 100644
--- a/website/tailwind.config.cjs
+++ b/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)',