Fix/ Loading Bar can not have signals (#590)

@bflatastic please be mindful that all the components in the reusable
folder are/could-be/should-be reused in different components, which
means, if a signal is needed, their parent component has to load that
signal and pass it on to them, otherwise the component wont be reusable
anymore

Co-authored-by: wil <wil@storyteller.ai>

app/components/reusable/LoadingBar.tsx

@@ -1,7 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
-import { LoadingSpinner } from "..";
-import { loadingBarData } from "~/signals";
+import { LoadingSpinner } from "~/components";
 
 interface LoadingBarProps {
   id?: string;
@@ -11,6 +10,7 @@ interface LoadingBarProps {
   progressClassName?: string;
   variant?: string;
   show?: boolean;
+  hasSpinner?: boolean;
   progressData: {
     progress: number;
     label?: string;
@@ -23,6 +23,7 @@ export const LoadingBar = ({
   progressBackgroundClassName: propsProgressBackgroundClassName,
   progressClassName: propsProgressClassName,
   progressData,
+  hasSpinner,
   variant = "primary",
   show = true,
   ...rest
@@ -70,13 +71,11 @@ export const LoadingBar = ({
       {...rest}
     >
       <div className={innerWrapperClassName}>
-        {progressData.label && <label>{progressData.label}</label>}
-
         <div className="flex flex-col items-center gap-3">
           <div className="flex items-center gap-2.5">
-            <LoadingSpinner className="h-5" />
-            {progressData.message && (
-              <p className="text-lg font-medium">{progressData.message}</p>
+            {hasSpinner && <LoadingSpinner className="h-5" />}
+            {progressData.label && (
+              <label className="text-lg">{progressData.label}</label>
             )}
           </div>
         </div>
@@ -88,9 +87,9 @@ export const LoadingBar = ({
           />
         </div>
 
-        {loadingBarData.value.message?.includes("Processing") && (
+        {progressData.message && (
           <p className="text-center text-sm opacity-75">
-            Please stay on this screen while your video is being processed.
+            {progressData.message}
           </p>
         )}
       </div>

app/pages/PageEnigma/Editor/editor.ts

@@ -506,7 +506,7 @@ class Editor {
       this.last_selected,
       this.getAssetType.bind(this),
       this.setSelected.bind(this),
-      this.isMovable.bind(this)
+      this.isMovable.bind(this),
     );
 
     if (this.outliner_feature_flag) {
@@ -686,11 +686,19 @@ class Editor {
     loadingBarIsShowing.value = true;
   }
 
-  async updateLoad(progress: number, message: string) {
+  async updateLoad({
+    progress,
+    message,
+    label,
+  }: {
+    progress?: number;
+    message?: string;
+    label?: string;
+  }) {
     loadingBarData.value = {
-      ...loadingBarData.value,
-      progress: progress,
-      message: message,
+      label: label ?? loadingBarData.value.label,
+      progress: progress ?? loadingBarData.value.progress,
+      message: message ?? loadingBarData.value.message,
     };
   }
 
@@ -857,8 +865,8 @@ class Editor {
 
     const delta_time = this.clock.getDelta();
     this.cameraViewControls?.update(5 * delta_time);
-    this.activeScene.shader_objects.forEach(shader => {
-      shader.material.uniforms[ 'time' ].value += 0.5 * delta_time;
+    this.activeScene.shader_objects.forEach((shader) => {
+      shader.material.uniforms["time"].value += 0.5 * delta_time;
     });
 
     if (this.cameraViewControls && this.camera_person_mode) {
@@ -982,7 +990,12 @@ class Editor {
   }
 
   togglePlayback() {
-    this.updateLoad(25, "Starting Processing");
+    this.updateLoad({
+      progress: 25,
+      label: "Starting Processing",
+      message:
+        "Please stay on this screen while your video is being processed.",
+    });
     if (this.rawRenderer) {
       this.startRenderWidth = this.rawRenderer.domElement.width;
       this.startRenderHeight = this.rawRenderer.domElement.height;

app/pages/PageEnigma/comps/EditorLoadingBar.tsx

@@ -10,6 +10,7 @@ export const EditorLoadingBar = () => {
       show={loadingBarIsShowing.value}
       wrapperClassName="absolute top-0 left-0 z-20"
       innerWrapperClassName="max-w-screen-sm"
+      hasSpinner
       progressData={loadingBarData.value}
     />
   );

app/signals/loadingBar.ts

@@ -6,7 +6,7 @@ export const loadingBarData = signal<{
   message: string;
   progress: number;
 }>({
-  label: "",
+  label: "Loading Editor Engine... 🦊",
   progress: 5,
-  message: "Loading Editor Engine... 🦊",
+  message: "",
 });