diff --git a/app/components/reusable/LoadingBar.tsx b/app/components/reusable/LoadingBar.tsx index 493db1fa1c..2fae5f80e2 100644 --- a/app/components/reusable/LoadingBar.tsx +++ b/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} >
- {progressData.label && } -
- - {progressData.message && ( -

{progressData.message}

+ {hasSpinner && } + {progressData.label && ( + )}
@@ -88,9 +87,9 @@ export const LoadingBar = ({ />
- {loadingBarData.value.message?.includes("Processing") && ( + {progressData.message && (

- Please stay on this screen while your video is being processed. + {progressData.message}

)} diff --git a/app/pages/PageEnigma/Editor/editor.ts b/app/pages/PageEnigma/Editor/editor.ts index 4d8c22e7b9..e66aae2feb 100644 --- a/app/pages/PageEnigma/Editor/editor.ts +++ b/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; diff --git a/app/pages/PageEnigma/comps/EditorLoadingBar.tsx b/app/pages/PageEnigma/comps/EditorLoadingBar.tsx index 0e857a7cf6..842e0fa12d 100644 --- a/app/pages/PageEnigma/comps/EditorLoadingBar.tsx +++ b/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} /> ); diff --git a/app/signals/loadingBar.ts b/app/signals/loadingBar.ts index d0988af2ef..a2753f7e71 100644 --- a/app/signals/loadingBar.ts +++ b/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: "", });