From 1c625c64a5ab2019f0a872afe0e4e1fb22c6a8d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Teemu=20P=C3=A4=C3=A4kk=C3=B6nen?= <oamaok@gmail.com>
Date: Wed, 20 Oct 2021 22:44:48 +0300
Subject: [PATCH] Add progress bar to initialization

---
 client/src/audio.ts               | 20 ++++++++++----------
 client/src/components/app/App.tsx | 11 +++++++++++
 client/src/components/app/app.css | 18 ++++++++++++++++++
 client/src/reset.css              |  1 +
 client/src/state.ts               |  3 ++-
 client/src/types.ts               |  1 +
 6 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/client/src/audio.ts b/client/src/audio.ts
index 54e1bca..9f37e32 100644
--- a/client/src/audio.ts
+++ b/client/src/audio.ts
@@ -1,20 +1,20 @@
 import { workletNames, WorkletNode } from './worklets'
+import state from './state'
 
 let audioContext: AudioContext | null = null
 
 export const initializeAudio = async () => {
   audioContext = new AudioContext()
 
-  await Promise.all(
-    workletNames.map(async (worklet) => {
-      const path = `/worklets/${worklet}.js`
-      try {
-        await audioContext!.audioWorklet.addModule(path)
-      } catch (err) {
-        throw new Error(`Failed to load audio worklet: ${path}`)
-      }
-    })
-  )
+  for (const worklet of workletNames) {
+    const path = `/worklets/${worklet}.js`
+    try {
+      await audioContext!.audioWorklet.addModule(path)
+      state.loadedWorklets++
+    } catch (err) {
+      throw new Error(`Failed to load audio worklet: ${path}`)
+    }
+  }
 }
 
 export const getAudioContext = () => {
diff --git a/client/src/components/app/App.tsx b/client/src/components/app/App.tsx
index fe8b203..279e30d 100644
--- a/client/src/components/app/App.tsx
+++ b/client/src/components/app/App.tsx
@@ -7,6 +7,7 @@ import ModuleSelector from '../module-selector/ModuleSelector'
 import Patch from '../patch/Patch'
 import Hint from '../hint/Hint'
 import { initializeAudio } from '../../audio'
+import { workletNames } from '../../worklets'
 import state, { patch } from '../../state'
 import * as types from '../../../../common/types'
 import * as api from '../../api'
@@ -64,6 +65,16 @@ const InitModal = () => {
         Please adjust your audio levels before continuing. This application is
         capable of producing ear-busting sonic experiences.
         <button onClick={initialize}>I'm ready!</button>
+        <div className={css('loading-bar')}>
+          <div
+            className={css('progress')}
+            style={{
+              transform: `scaleX(${
+                state.loadedWorklets / workletNames.length
+              })`,
+            }}
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/client/src/components/app/app.css b/client/src/components/app/app.css
index 737ef09..f84ad45 100644
--- a/client/src/components/app/app.css
+++ b/client/src/components/app/app.css
@@ -24,3 +24,21 @@
 .init-modal button {
   margin-top: 10px;
 }
+
+.loading-bar {
+  margin-top: 10px;
+  height: 10px;
+  width: 100%;
+  box-shadow: var(--box-shadow) inset;
+  border-radius: 3px;
+  background: var(--background);
+  overflow: hidden;
+}
+
+.progress {
+  height: 100%;
+  width: 100%;
+  background-color: var(--primary);
+  transform-origin: left;
+  transition: transform 0.1s linear;
+}
diff --git a/client/src/reset.css b/client/src/reset.css
index bae16b8..57d48be 100644
--- a/client/src/reset.css
+++ b/client/src/reset.css
@@ -53,4 +53,5 @@ input {
   margin-bottom: -2px;
 
   box-shadow: inset var(--box-shadow);
+  transform-origin: bottom left;
 }
diff --git a/client/src/state.ts b/client/src/state.ts
index 8448c8b..581e54d 100644
--- a/client/src/state.ts
+++ b/client/src/state.ts
@@ -6,6 +6,7 @@ import { parseRoute } from './routes'
 
 const state = createState<State>({
   initialized: false,
+  loadedWorklets: 0,
   cursor: { x: 0, y: 0 },
   viewport: { width: window.innerWidth, height: window.innerHeight },
   user: null,
@@ -158,7 +159,7 @@ export const getCableConnectionCandidate = () => {
   )
 
   const candidateSocket = targetSockets.find((socket) => {
-    const { x, y } = getSocketPosition(socket)
+    const { x, y } = getSocketPosition(socket)!
     return (x - state.cursor.x) ** 2 + (y - state.cursor.y) ** 2 < 200
   })
 
diff --git a/client/src/types.ts b/client/src/types.ts
index f051db5..62bb03f 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -13,6 +13,7 @@ export type Route =
 
 export type State = {
   initialized: boolean
+  loadedWorklets: number
   viewport: {
     width: number
     height: number