diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 4956279b61..16955dec9e 100644
--- a/app/components/Button.tsx
+++ b/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>
diff --git a/app/components/LoadingDots.tsx b/app/components/LoadingDots.tsx
index 4d622587ba..23caa8ab95 100644
--- a/app/components/LoadingDots.tsx
+++ b/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]);
 
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 6a4e2c3437..62ebf1e11b 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/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>
   );
 };
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 65af5650f3..0298210679 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -9,7 +9,7 @@ export const ControlsTopButtons = () => {
 
   const handleButtonSave = () => {
     console.log(`SceneName is ${sceneName}`);
-    // editorEngine?.save();
+    editorEngine?.save();
   };
 
   const handleButtonCameraView = () => {
@@ -24,7 +24,7 @@ export const ControlsTopButtons = () => {
   };
   const handleButtonRender = () => {
     console.log("Saving GLB to server for reference");
-    editorEngine._upload_for_testing();
+    editorEngine?._upload_for_testing();
     //editorEngine?.togglePlayback();
   };
   const handleButtonPlay = () => {};
@@ -47,7 +47,10 @@ export const ControlsTopButtons = () => {
           onClick: handleButtonSave,
         }}
       >
-        <Input label="Please Enter a name for your scene" />
+        <Input
+          label="Please Enter a name for your scene"
+          onChange={(e)=>{setSceneName(e.target.value)}}
+        />
       </ButtonDialogue>
 
       <ButtonDialogue
diff --git a/app/pages/PageEnigma/contexts/EngineProvider.tsx b/app/pages/PageEnigma/contexts/EngineProvider.tsx
index 8f45892ea5..c10b04eb6e 100644
--- a/app/pages/PageEnigma/contexts/EngineProvider.tsx
+++ b/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}>
diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js
index c8b2b04515..055eff14a6 100644
--- a/app/pages/PageEnigma/js/editor.js
+++ b/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;
     }