fix/loadingbar-untangled-from-signals (#492)

quick fix

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

app/components/reusable/LoadingBar.tsx

@@ -1,8 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { Transition } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
-import { loadingBarData, loadingBarIsShowing } from "~/signals/loadingBar";
-import { useSignals } from "@preact/signals-react/runtime";
 
 interface LoadingBarProps {
   id?: string;
@@ -11,72 +8,23 @@ interface LoadingBarProps {
   progressBackgroundClassName?: string;
   progressClassName?: string;
   variant?: string;
+  show?: boolean;
+  progressData: {
+    progress: number;
+    label?: string;
+    message?: string;
+  };
 }
 export const LoadingBar = ({
   wrapperClassName: propsWrapperClassName,
   innerWrapperClassName: propsInnerWrapperClassName,
   progressBackgroundClassName: propsProgressBackgroundClassName,
   progressClassName: propsProgressClassName,
+  progressData,
   variant = "primary",
+  show = true,
   ...rest
 }: LoadingBarProps) => {
-  useSignals();
-  const [progress, setProgress] = useState<number>(
-    loadingBarData.value.progress,
-  );
-  const [loop, setLoop] = useState<NodeJS.Timeout | null>(null);
-
-  const useFakeTimer = useRef(0);
-  if (useFakeTimer.current !== loadingBarData.value.useFakeTimer) {
-    useFakeTimer.current = loadingBarData.value.useFakeTimer;
-    if (loop) {
-      clearInterval(loop);
-    }
-    if (loadingBarData.value.useFakeTimer > 0) {
-      if (loadingBarData.value.useFakeTimer >= 30000) {
-        // this math produce 96 cuts so the progress bar updates more
-        setLoop(
-          setInterval(
-            function step() {
-              setProgress((curr) => {
-                if (curr < 96) {
-                  return curr + 3;
-                } else {
-                  clearInterval(loop!);
-                  return curr;
-                }
-              });
-            },
-            Math.round(loadingBarData.value.useFakeTimer / 96) * 3,
-          ),
-        );
-      }
-      // this math produce less cuts if useFakeTimer predicts
-      // a shorter load time, shorter than 30s
-      const progressPerInterval = loadingBarData.value.useFakeTimer / 500;
-      setLoop(
-        setInterval(function step() {
-          setProgress((curr) => {
-            if (curr + progressPerInterval < 96) {
-              return curr + progressPerInterval;
-            } else if (curr < 96 && curr + progressPerInterval >= 96) {
-              return 96;
-            } else {
-              clearInterval(loop!);
-              return curr;
-            }
-          });
-        }, 300),
-      );
-    }
-  }
-
-  const oldProgress = useRef(loadingBarData.value.progress);
-  if (oldProgress.current !== loadingBarData.value.progress) {
-    oldProgress.current = loadingBarData.value.progress;
-    setProgress(loadingBarData.value.progress);
-  }
-
   function getVariantClassNames(variant: string) {
     switch (variant) {
       case "secondary": {
@@ -110,25 +58,24 @@ export const LoadingBar = ({
   return (
     <Transition
       className={wrapperClassName}
-      show={loadingBarIsShowing.value}
+      show={show}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
       enterTo="opacity-100"
       leave="transition-opacity duration-1000"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
-      {...rest}>
+      {...rest}
+    >
       <div className={innerWrapperClassName}>
-        {loadingBarData.value.label && (
-          <label>{loadingBarData.value.label}</label>
-        )}
+        {progressData.label && <label>{progressData.label}</label>}
         <div className={progressBackgroundClassName}>
           <div
             className={progressClassName}
-            style={{ width: progress + "%" }}
+            style={{ width: progressData.progress + "%" }}
           />
         </div>
-        {loadingBarData.value.message && <p>{loadingBarData.value.message}</p>}
+        {progressData.message && <p>{progressData.message}</p>}
       </div>
     </Transition>
   );

app/components/reusable/index.ts

@@ -12,6 +12,7 @@ export * from "./Gravatar";
 export * from "./Input"; //need to decouple hotkey signal
 export * from "./InputVector"; //need to decouple hotkey signal
 export * from "./ListDropdown";
+export * from "./LoadingBar";
 export * from "./Pagination";
 export * from "./Pill";
 export * from "./Select"; //Select's onChange type should be generic
@@ -22,8 +23,6 @@ export * from "./TransitionDialogue"; //need to decouple hotkey signal
 export * from "./Typography";
 export * from "./WaveformPlayer";
 
-//TODO: need to rewrite to decouple from signal
-export * from "./LoadingBar";
 //TODO: need to rewrite because it's against tailwind
 export * from "./LoadingDots";
 //TODO: need to rewrite because it's not using fontawesome

app/pages/PageEnigma/PageEnigma.tsx

@@ -4,10 +4,11 @@ import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragCompon
 import { EngineProvider } from "./contexts/EngineContext";
 import { useActiveJobs } from "~/hooks";
 import { useQueueHandler } from "./hooks/useQueueHandler";
-import { ErrorDialog, LoadingBar } from "~/components";
+import { ErrorDialog } from "~/components";
 import { GenerateModals } from "~/pages/PageEnigma/comps/GenerateModals/GenerateModals";
 import { useBackgroundLoadingMedia } from "~/hooks/useBackgroundLoadingMedia";
 
+import { EditorLoadingBar } from "./comps/EditorLoadingBar";
 export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   useActiveJobs();
   useBackgroundLoadingMedia();
@@ -23,11 +24,7 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
         <GenerateModals />
         <ErrorDialog />
       </EngineProvider>
-      <LoadingBar
-        id="editor-loading-bar"
-        wrapperClassName="absolute top-0 left-0 z-20"
-        innerWrapperClassName="max-w-screen-sm"
-      />
+      <EditorLoadingBar />
     </TrackProvider>
   );
 };

app/pages/PageEnigma/comps/EditorLoadingBar.tsx

@@ -0,0 +1,16 @@
+import { useSignals } from "@preact/signals-react/runtime";
+import { loadingBarData, loadingBarIsShowing } from "~/signals";
+
+import { LoadingBar } from "~/components";
+export const EditorLoadingBar = () => {
+  useSignals();
+  return (
+    <LoadingBar
+      id="editor-loading-bar"
+      show={loadingBarIsShowing.value}
+      wrapperClassName="absolute top-0 left-0 z-20"
+      innerWrapperClassName="max-w-screen-sm"
+      progressData={loadingBarData.value}
+    />
+  );
+};

app/signals/loadingBar.ts

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