resolved conflict and finished button

app/components/Button.tsx

@@ -12,11 +12,16 @@ export const Button = ({
   icon,
   children,
   className: propsClassName,
-  variant = "primary",
+  variant: propsVariant = "primary",
+  disabled,
   ...rest
 }: ButtonPropsI) => {
+  const variant = disabled ? 'disabled' : propsVariant;
   function getVariantClassNames(variant: string) {
     switch (variant) {
+      case "disabled":{
+        return "bg-brand-secondary-500 text-brand-secondary-300"
+      }
       case "secondary": {
         return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
@@ -34,7 +39,7 @@ export const Button = ({
   );
 
   return (
-    <button className={className} {...rest}>
+    <button className={className} disabled={disabled} {...rest}>
       {icon && <FontAwesomeIcon className="mr-2" icon={icon} />}
       {children}
     </button>

app/components/LoadingDots.tsx

@@ -55,6 +55,11 @@ function LoadingDots({
       } else {
         setState('completed');
       }
+    }else{
+      setState((curr) => {
+        if (curr!=='loading') return 'loading';
+        else return curr;
+      });
     }
   }, [show, transition]);
 

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -33,8 +33,8 @@ export const PageEnigmaComponent = () => {
         <Button icon={faSparkles}>Generate Movie</Button>
       </TopBarHelmet>
       
-      <EngineProvider>
-        <AppUIProvider value={[appUiState, dispatchAppUiState]} >
+      <AppUIProvider value={[appUiState, dispatchAppUiState]} >
+        <EngineProvider>
           <div style={{ height: "calc(100vh - 68px)" }}>
             {/* Engine section/side panel */}
             <div
@@ -85,8 +85,8 @@ export const PageEnigmaComponent = () => {
             {/* Timeline */}
             <Timeline timelineHeight={appUiState.timelineHeight} />
           </div>
-        </AppUIProvider>
-      </EngineProvider>
+        </EngineProvider>
+      </AppUIProvider>
     </div>
   );
 };

app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -10,12 +10,12 @@ export const ControlsTopButtons = () => {
 
   const handleButtonSave = () => {
     console.log(`SceneName is ${sceneName}`);
-    // editorEngine?.save();
+    editorEngine?.save();
   };
 
   const handleButtonLoadScene = () => {
     console.log(`Scene Token is ${sceneToken}`);
-    // editorEngine?.save();
+    // editorEngine?.dosomething();
   };
 
   // const handleButtonCameraView = () => {
@@ -50,23 +50,29 @@ export const ControlsTopButtons = () => {
               onClick: handleButtonLoadScene,
             }}
           >
-          <Input label="Please Enter a name for your scene" />
+          <Input
+            label="Please provide the Token of the scene you wished to load:"
+            onChange={(e)=>{setSceneToken(e.target.value)}}
+          />
         </ButtonDialogue>
 
-        <ButtonDialogue
-          buttonProps={{
-            variant: "secondary",
-            label: "Save Scene",
-          }}
-          title="Save Scene"
-          confirmButtonProps={{
-            label: "Save",
-            disabled: sceneName === "" ? true : false,
-            onClick: handleButtonSave,
-          }}
-        >
-          <Input label="Please Enter a name for your scene" />
-        </ButtonDialogue>
+      <ButtonDialogue
+        buttonProps={{
+          variant: "secondary",
+          label: "Save Scene",
+        }}
+        title="Save Scene"
+        confirmButtonProps={{
+          label: "Save",
+          disabled: sceneName === "" ? true : false,
+          onClick: handleButtonSave,
+        }}
+      >
+        <Input
+          label="Please Enter a name for your scene"
+          onChange={(e)=>{setSceneName(e.target.value)}}
+        />
+      </ButtonDialogue>
 
         <ButtonDialogue
           buttonProps={{

app/pages/PageEnigma/contexts/EngineProvider.tsx

@@ -1,13 +1,18 @@
-import { ReactNode, useEffect, useState } from "react";
-import { EngineContext } from "./EngineContext";
+import { ReactNode, useContext, useEffect, useState } from "react";
+
 import Editor from "~/pages/PageEnigma/js/editor";
 
+import { EngineContext } from "./EngineContext";
+import { AppUiContext } from "./AppUiContext";
+
+
 interface Props {
   children: ReactNode;
 }
 
 export const EngineProvider = ({ children }: Props) => {
   const [editor, setEditor] = useState<Editor | null>(null);
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
 
   useEffect(() => {
     //componentDidMount
@@ -28,9 +33,13 @@ export const EngineProvider = ({ children }: Props) => {
   }, []);
 
   useEffect(()=>{
-    if (editor && editor.can_initailize)
-      editor.initialize();
-  }, [editor]);
+    if (editor && editor.can_initailize && dispatchAppUiState!==null){
+      console.log("initializing Editor");
+      editor.initialize({
+        dispatchAppUiState
+      });
+    }
+  }, [editor, dispatchAppUiState]);
 
   return (
     <EngineContext.Provider value={editor}>

app/pages/PageEnigma/js/editor.js

@@ -22,6 +22,7 @@ import { LipSync } from "./lipsync.js";
 import { LipSyncEngine } from "./lip_sync_engine.ts";
 import { AnimationEngine } from "./animation_engine.ts";
 import { faL } from "@fortawesome/pro-solid-svg-icons";
+import { ACTION_TYPES } from "../reducer";
 
 if (typeof window !== "undefined") {
   import("ccapture.js")
@@ -114,13 +115,23 @@ class Editor {
     this.test_box_uuid = null;
     this.current_frame = 0;
     this.test_playback = false;
+
+    //Reactland Callbacks
+    this.dispatchAppUiState = null;
   }
 
   // Initializes the main scene and ThreeJS essentials.
-  initialize() {
+  /*
+    config :{
+      dispatchAppUiState: dispatch function to react app
+    }
+  */
+  initialize(config) {
     if (this.can_initailize == false) {
       return;
     }
+    this.can_initailize == false;
+
     // Gets the canvas.
     this.canvReference = document.getElementById("video-scene");
     // Base width and height.
@@ -164,6 +175,8 @@ class Editor {
 
     this.timeline.scene = this.activeScene;
 
+    //setup reactland Callbacks
+    this.dispatchAppUiState = config.dispatchAppUiState
     this._test_demo()
   }
 
@@ -377,6 +390,15 @@ class Editor {
     //this.audio_engine.playClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg");
     //console.log(this.selected);
 
+    this.dispatchAppUiState({
+      type: ACTION_TYPES.SHOW_EDITOR_LOADER
+    });
+
+
+    // this.dispatchAppUiState({
+    //   type: ACTION_TYPES.HIDE_EDITOR_LOADER
+    // });
+
     if (this.selected == null) {
       return;
     }