loading bar in editor, with dispatch functions, and other housekeeping things

app/components/LoadingBar.tsx

@@ -4,22 +4,30 @@ import { twMerge } from 'tailwind-merge';
 
 
 interface LoadingBarProps{
+  id?: string;
+  wrapperClassName?:string;
+  innerWrapperClassName?: string;
+  progressBackgroundClassName?: string;
+  progressClassName?: string;
   label?: string;
   progress?: number;
   isShowing?: boolean;
   variant?: string;
   message?: string;
-  wrapperClassName?: string;
   useFakeTimer?: number; 
 }
 export const LoadingBar = ({
+  wrapperClassName : propsWrapperClassName,
+  innerWrapperClassName: propsInnerWrapperClassName,
+  progressBackgroundClassName: propsProgressBackgroundClassName,
+  progressClassName : propsProgressClassName,
   label,
   progress: propsProgress = 0,
   isShowing = true,
   variant = 'primary',
   message,
-  wrapperClassName : propsWrapperClassName,
-  useFakeTimer
+  useFakeTimer,
+  ...rest
 }: LoadingBarProps) => {
   const [progress, setProgress] = useState<number>(propsProgress);
 
@@ -79,12 +87,21 @@ export const LoadingBar = ({
   }
 
   const wrapperClassName = twMerge(
-    "w-full h-full flex flex-col justify-center items-center bg-ui-background p-4 gap-4",
+    "w-full h-full relative bg-ui-background",
     propsWrapperClassName,
   )
+  const innerWrapperClassName = twMerge(
+    "w-full h-full p-4 gap-4 m-auto flex flex-col justify-center items-center",
+    propsInnerWrapperClassName,
+  );
+  const progressBackgroundClassName = twMerge(
+    "w-full bg-gray-500 rounded-full h-2.5",
+    propsProgressBackgroundClassName
+  );
   const progressClassName = twMerge(
     "h-2.5 rounded-full transition-all duration-1000",
     getVariantClassNames(variant),
+    propsProgressClassName
   );
 
   return (
@@ -97,15 +114,18 @@ export const LoadingBar = ({
       leave="transition-opacity duration-1000"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
+      {...rest}
     >
-      {label && <label>{label}</label>}
-      <div className="w-full bg-gray-500 rounded-full h-2.5">
-        <div 
-          className={progressClassName} 
-          style={{width: progress + '%'}}
-        />
+      <div className={innerWrapperClassName}>
+        {label && <label>{label}</label>}
+        <div className={progressBackgroundClassName}>
+          <div 
+            className={progressClassName} 
+            style={{width: progress + '%'}}
+          />
+        </div>
+        {message && <p>{message}</p>}
       </div>
-      {message && <p>{message}</p>}
     </Transition>
   );
 }

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useReducer } from "react";
+import { useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
-import { Button, LoadingDots } from "~/components";
+import { Button, LoadingBar, LoadingDots } from "~/components";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
@@ -14,12 +14,11 @@ import { SidePanelTabs } from "./comps/SidePanelTabs";
 
 import { EngineProvider } from "./contexts/EngineProvider";
 import { AppUIProvider } from "./contexts/AppUiContext";
-import { reducer, initialState, ACTION_TYPES } from "./reducer";
-import { VIEW_MODES } from "./reducer/types";
+import { appUiReducer, appUiInitialStateValues, APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "./reducers";
 import { ViewSideBySide } from "./comps/ViewSideBySide";
 
 export const PageEnigmaComponent = () => {
-  const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState);
+  const [appUiState, dispatchAppUiState] = useReducer(appUiReducer, appUiInitialStateValues);
   
 
   return (
@@ -39,7 +38,7 @@ export const PageEnigmaComponent = () => {
               // style={{ height: `calc(100% - 260px` }}
             >
               <div className="relative w-full overflow-hidden bg-transparent">
-                <div className={(appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
+                <div className={(appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
                   <canvas
                     id="video-scene"
                     width="1280px"
@@ -61,15 +60,25 @@ export const PageEnigmaComponent = () => {
                   </div>
                 </div>
                 {
-                  appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
+                  appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE &&
                   <ViewSideBySide />
                 }
                 <LoadingDots
                   className="absolute top-0 left-0"
-                  isShowing={appUiState.showEditorLoader.isShow}
+                  isShowing={appUiState.showEditorLoader.isShowing}
                   type="bricks"
                   message={appUiState.showEditorLoader.message}
                 />
+                <LoadingBar
+                  id="editor-loading-bar"
+                  wrapperClassName="absolute top-0 left-0"
+                  innerWrapperClassName="max-w-screen-sm"
+                  isShowing={appUiState.showEditorLoadingBar.isShowing}
+                  message={appUiState.showEditorLoadingBar.message}
+                  label={appUiState.showEditorLoadingBar.label}
+                  progress={appUiState.showEditorLoadingBar.progress}
+                  useFakeTimer={30000}
+                />
               </div>
               
               {/* Side panel */}

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

@@ -1,10 +1,13 @@
 import { useContext, useState } from "react";
-import { Button, H4, Input } from "~/components";
+import { Button, Input } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
+import { AppUiContext } from "../../contexts/AppUiContext";
 import { EngineContext } from "../../contexts/EngineContext";
+import { APPUI_ACTION_TYPES } from "../../reducers";
 
 export const ControlsTopButtons = () => {
   const editorEngine = useContext(EngineContext);
+  const [ appUiState, dispatchAppUiState ] = useContext(AppUiContext);
   const [sceneName, setSceneName] = useState<string>("");
   const [sceneToken, setSceneToken] = useState<string>("");
 
@@ -18,22 +21,36 @@ export const ControlsTopButtons = () => {
     editorEngine?.loadScene(sceneToken);
   };
 
+  const handleButtonPlayBack = () => {
+    editorEngine?.start_playback();
+  };
+
+  const handleButtonTest = () => {
+    if(appUiState?.showEditorLoadingBar.isShowing){
+      dispatchAppUiState({
+        type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR,
+      });
+    }else{
+      dispatchAppUiState({
+        type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR,
+        payload:{
+          showEditorLoadingBar: {
+            message: 'display of LoadingBar triggered by Test Button'
+          }
+        }
+        
+      });
+    }
+  };
+
   // const handleButtonCameraView = () => {
   //   editorEngine?.change_camera_view();
   // };
 
-  const handleButtonPlayBack = () => {
-    editorEngine?.start_playback();
-  };
-  const handleButtonLoad = () => {
+  // const handleButtonLoad = () => {};
+  // const handleButtonRender = () => {};
 
 
-  };
-  const handleButtonRender = () => {
-   
-  };
-  const handleButtonPlay = () => {};
-
   return (
     <div className="flex flex-col gap-2 pl-3 pt-3">
       <div className="flex gap-2">
@@ -93,9 +110,15 @@ export const ControlsTopButtons = () => {
         </Button>
       </div>
       <div className="flex gap-2">
-        <Button onClick={handleButtonLoad}>Load</Button>
-        <Button onClick={handleButtonRender}>Render</Button>
-        <Button onClick={handleButtonPlay}>Play</Button>
+        {/* <Button onClick={handleButtonLoad}>Load</Button>
+        <Button onClick={handleButtonRender}>Render</Button> */}
+        <Button
+          onClick={handleButtonTest}
+          className="bg-brand-tertiary hover:bg-brand-tertiary-400"
+          style={{zIndex:9001}}
+        >
+          Test
+        </Button>
       </div>
     </div>
   );

app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx

@@ -8,8 +8,8 @@ import {
 } from "~/components"
 
 import { AppUiContext } from '../../contexts/AppUiContext';
-import { ACTION_TYPES } from '../../reducer';
-import { VIEW_MODES } from '../../reducer/types';
+import { APPUI_ACTION_TYPES } from '../../reducers';
+import { APPUI_VIEW_MODES } from '../../reducers';
 
 export const TabStylization = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
@@ -23,10 +23,10 @@ export const TabStylization = ()=>{
   const handleChangeViewMode = ()=>{
     if(dispatchAppUiState!==null){
       dispatchAppUiState({
-        type: ACTION_TYPES.ON_CHANGE_VIEW_MODE,
+        type: APPUI_ACTION_TYPES.ON_CHANGE_VIEW_MODE,
         payload: {
-          viewMode: appUiState?.viewMode === VIEW_MODES.SIDE_BY_SIDE
-            ? VIEW_MODES.EDITOR : VIEW_MODES.SIDE_BY_SIDE,
+          viewMode: appUiState?.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE
+            ? APPUI_VIEW_MODES.EDITOR : APPUI_VIEW_MODES.SIDE_BY_SIDE,
         }
       })
     }
@@ -77,7 +77,7 @@ export const TabStylization = ()=>{
       <div className="flex gap-2 mt-6 justify-center">
         <Button onClick={handleChangeViewMode}>
           { 
-            appUiState?.viewMode ===  VIEW_MODES.SIDE_BY_SIDE 
+            appUiState?.viewMode ===  APPUI_VIEW_MODES.SIDE_BY_SIDE 
             ? "Back to Scene" : "Preview Side by Side"
           }
         </Button>

app/pages/PageEnigma/contexts/AppUiContext.tsx

@@ -1,13 +1,16 @@
 import { createContext, Dispatch, ReactNode } from "react";
-import { State, Action } from "../reducer";
+import { AppUiState, AppUiAction } from "../reducers";
 
-export const AppUiContext = createContext<[State|null, Dispatch<Action>|null]>([null,null]);
+export const AppUiContext = createContext<[
+  AppUiState | null,
+  Dispatch<AppUiAction>
+]>([ null ,()=>{}]);
 
 export const AppUIProvider = ({
   value,
   children,
 }:{
-  value:[State, Dispatch<Action>],
+  value:[AppUiState, Dispatch<AppUiAction>],
   children: ReactNode
 })=>{
   return (

app/pages/PageEnigma/js/editor.ts

@@ -18,7 +18,7 @@ import { TimeLine, TimelineDataState } from "./timeline.js";
 import { ClipUI } from "../datastructures/clips/clip_offset.js";
 import { LipSyncEngine } from "./lip_sync_engine.js";
 import { AnimationEngine } from "./animation_engine.js";
-import { ACTION_TYPES } from "../reducer";
+import { APPUI_ACTION_TYPES } from "../reducers";
 
 class EditorState {
   // {
@@ -176,7 +176,7 @@ class Editor {
 
     // Show Loader
     this.dispatchAppUiState({
-      type: ACTION_TYPES.SHOW_EDITOR_LOADER
+      type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER
     });
 
     if (this.can_initialize == false) {
@@ -234,14 +234,14 @@ class Editor {
 
     // hide loader
     this.dispatchAppUiState({
-      type: ACTION_TYPES.HIDE_EDITOR_LOADER
+      type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER
     });
   }
 
   // Token comes in from the front end to load the scene from the site.
   public async loadScene(scene_media_token: string) {
     this.dispatchAppUiState({
-      type: ACTION_TYPES.SHOW_EDITOR_LOADER
+      type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER
     });
 
     if (scene_media_token != null) {
@@ -275,7 +275,7 @@ class Editor {
     });
 
     this.dispatchAppUiState({
-      type: ACTION_TYPES.HIDE_EDITOR_LOADER
+      type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER
     });
   }
 
@@ -283,7 +283,7 @@ class Editor {
     // remove controls when saving scene.
     this.removeTransformControls();
     this.dispatchAppUiState({
-      type: ACTION_TYPES.SHOW_EDITOR_LOADER
+      type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER
     });
     console.log(`saveScene => SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`);
     
@@ -305,7 +305,7 @@ class Editor {
     } 
 
     this.dispatchAppUiState({
-        type: ACTION_TYPES.HIDE_EDITOR_LOADER
+        type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER
     });
   }
 

app/pages/PageEnigma/reducer/index.tsx

@@ -1,18 +0,0 @@
-import {State, Action, ACTION_TYPES, VIEW_MODES} from './types';
-import {reducer} from './reducer';
-
-const initialState:State = {
-  timelineHeight: 260,
-  viewMode: VIEW_MODES.EDITOR,
-  showEditorLoader: {
-    isShowing:true,
-    message: 'loading Editor Engine 🦊'
-  }
-}
-
-export type {State, Action};
-export {
-  ACTION_TYPES,
-  initialState,
-  reducer,
-}

app/pages/PageEnigma/reducers/appUiReducer/index.tsx

@@ -0,0 +1,16 @@
+import {State, Action, ACTION_TYPES, VIEW_MODES} from './types';
+import {reducer} from './reducer';
+
+import { initialStateValues } from './values';
+
+export type {
+  State as AppUiState,
+  Action as AppUiAction,
+};
+
+export {
+  VIEW_MODES as APPUI_VIEW_MODES,
+  ACTION_TYPES as APPUI_ACTION_TYPES,
+  initialStateValues as appUiInitialStateValues,
+  reducer as appUiReducer,
+}

app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx

@@ -6,8 +6,8 @@ export function reducer(state: State, action: Action): State {
       return{
         ...state,
         showEditorLoader: {
-          isShow: true,
-          message: action.payload?.showEditorLoader.message || undefined,
+          isShowing: true,
+          message: action.payload?.showEditorLoader.message,
         },
       }
     }
@@ -15,11 +15,29 @@ export function reducer(state: State, action: Action): State {
       return{
         ...state,
         showEditorLoader: {
-          isShow: false,
+          isShowing: false,
           message: state.showEditorLoader.message
         },
       }
     }
+    case ACTION_TYPES.SHOW_EDITOR_LOADINGBAR:{
+      return{
+        ...state,
+        showEditorLoadingBar: {
+          ...action.payload?.showEditorLoadingBar,
+          isShowing: true,
+        },
+      }
+    }
+    case ACTION_TYPES.HIDE_EDITOR_LOADINGBAR:{
+      return{
+        ...state,
+        showEditorLoadingBar: {
+          ...state.showEditorLoadingBar,
+          isShowing: false,
+        },
+      }
+    }
     case ACTION_TYPES.ON_TIMELINE_RESIZE:{
       return{
         ...state,

app/pages/PageEnigma/reducers/appUiReducer/types.tsx

@@ -10,8 +10,15 @@ export type State = {
   timelineHeight: number;
   showEditorLoader: {
     isShowing:boolean;
-    message:string|undefined;
+    message?:string;
   };
+  showEditorLoadingBar:{
+    isShowing: boolean;
+    label?: string;
+    message?: string;
+    progress?: number;
+    useFakeTimer?: number;
+  }
 };
 
 
@@ -20,6 +27,8 @@ export enum ACTION_TYPES {
   ON_CHANGE_VIEW_MODE = "on_change_view_mode",
   SHOW_EDITOR_LOADER = "show_editor_loader",
   HIDE_EDITOR_LOADER = "hide_editor_loader",
+  SHOW_EDITOR_LOADINGBAR = "show_editor_loadingbar",
+  HIDE_EDITOR_LOADINGBAR = "hide_editor_loadingbar",
 };
 
 export type Action = 
@@ -32,6 +41,18 @@ export type Action =
         }
       }
     }
+  | {type: ACTION_TYPES.HIDE_EDITOR_LOADINGBAR,}
+  | {
+      type: ACTION_TYPES.SHOW_EDITOR_LOADINGBAR,
+      payload?:{
+        showEditorLoadingBar: {
+          label?: string;
+          message?: string;
+          progress?: number;
+          useFake?: boolean;
+        }
+      }
+    }
   | {
       type: ACTION_TYPES.ON_TIMELINE_RESIZE, 
       payload: {

app/pages/PageEnigma/reducers/appUiReducer/values.tsx

@@ -0,0 +1,14 @@
+import {State,  VIEW_MODES} from './types';
+
+export const initialStateValues : State = {
+  timelineHeight: 260,
+  viewMode: VIEW_MODES.EDITOR,
+  showEditorLoader: {
+    isShowing:true,
+    message: 'loading Editor Engine 🦊'
+  },
+  showEditorLoadingBar: {
+    isShowing:false,
+    progress:0,
+  }
+}

app/pages/PageEnigma/reducers/index.tsx

@@ -0,0 +1,20 @@
+import {
+  AppUiState,
+  AppUiAction,
+  APPUI_ACTION_TYPES,
+  APPUI_VIEW_MODES,
+  appUiInitialStateValues,
+  appUiReducer,
+} from './appUiReducer';
+
+export type {
+  AppUiState, 
+  AppUiAction
+};
+
+export {
+  APPUI_VIEW_MODES,
+  APPUI_ACTION_TYPES,
+  appUiInitialStateValues,
+  appUiReducer,
+}

tailwind.config.ts

@@ -47,6 +47,21 @@ export default {
         "900": "#464762",
         "950": "#39394c",
       },
+      "brand-tertiary": {
+        //Aquamarine Blue
+        DEFAULT: "#1cb6be", //=300
+        '50': '#eefdfc',
+        '100': '#d4f9f8',
+        '200': '#aef3f3',
+        '300': '#62e4e6',
+        '400': '#38d3d8',
+        '500': '#1cb6be',
+        '600': '#1a94a0',
+        '700': '#1c7682',
+        '800': '#1f616b',
+        '900': '#1e505b',
+        '950': '#0e353e',
+      },
       danger: {
         //copper rust
         DEFAULT: "#8f4951", //=700