continue with small optimizations

src/AudioVisualisation.ts

@@ -93,26 +93,29 @@ export const blinkScript = (
           (app.interface.feedback as HTMLCanvasElement).width,
           (app.interface.feedback as HTMLCanvasElement).height
         );
-      drawEmptyBlinkers(app);
     }, blinkDuration);
   }
 };
 
 /**
- * Draws a series of 9 white circles.
+ * Manages animation updates using requestAnimationFrame.
  * @param app - The Editor application context.
  */
-export const drawEmptyBlinkers = (app: Editor) => {
-  for (let no = 1; no <= 9; no++) {
-    const shiftAmount = no * 25;
-    drawCircle(
-      app,
-      50 + shiftAmount,
-      app.interface.feedback.clientHeight - 15,
-      8,
-      "white"
-    );
+export const scriptBlinkers = () => {
+  let lastFrameTime = Date.now();
+  const frameRate = 10;
+  const minFrameDelay = 1000 / frameRate;
+
+  const update = () => {
+    const now = Date.now();
+    const timeSinceLastFrame = now - lastFrameTime;
+
+    if (timeSinceLastFrame >= minFrameDelay) {
+      lastFrameTime = now;
     }
+    requestAnimationFrame(update);
+  };
+  requestAnimationFrame(update);
 };
 
 export interface OscilloscopeConfig {

src/EditorSetup.ts

@@ -2,7 +2,6 @@ import { Prec } from "@codemirror/state";
 import { indentWithTab } from "@codemirror/commands";
 import {
   keymap,
-  ViewUpdate,
   lineNumbers,
   highlightSpecialChars,
   drawSelection,

src/main.ts

@@ -1,4 +1,4 @@
-import { OscilloscopeConfig, runOscilloscope } from "./AudioVisualisation";
+import { OscilloscopeConfig, runOscilloscope, scriptBlinkers } from "./AudioVisualisation";
 import { EditorState, Compartment } from "@codemirror/state";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
@@ -27,7 +27,6 @@ import showdown from "showdown";
 import { makeStringExtensions } from "./extensions/StringExtensions";
 import { installInterfaceLogic } from "./InterfaceLogic";
 import { installWindowBehaviors } from "./WindowBehavior";
-import { drawEmptyBlinkers } from "./AudioVisualisation";
 import { makeNumberExtensions } from "./extensions/NumberExtensions";
 // @ts-ignore
 import { registerSW } from "virtual:pwa-register";
@@ -170,7 +169,7 @@ export class Editor {
     registerFillKeys(this);
     registerOnKeyDown(this);
     installInterfaceLogic(this);
-    drawEmptyBlinkers(this);
+    scriptBlinkers();
 
     // ================================================================================
     // Building CodeMirror Editor

vite.config.js

@@ -12,7 +12,7 @@ const vitePWAconfiguration = {
     sourcemap: false,
     cleanupOutdatedCaches: true,
     globPatterns: [
-      "**/*.{js,css,html,gif,png,json,woff,json,ogg,wav,mp3,ico,png,svg}",
+      "**/*.{js,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
     ],
     // Thanks Froos :)
     runtimeCaching: [