some housekeeping stuff

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
-import { Button } from "~/components";
+import { Button, LoadingDotsBricks } from "~/components";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
@@ -19,16 +19,14 @@ import { VIEW_MODES } from "./reducer/types";
 import { ViewSideBySide } from "./comps/ViewSideBySide";
 
 export const PageEnigmaComponent = () => {
-  const [pageState, dispatchPageState] = useReducer(reducer, initialState);
+  const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState);
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  // const [timelineHeight, setTimelineHeight] = useState(260);
   const timelineRef = useRef<HTMLDivElement | null>(null);
 
   const updateTimelineHeight = useCallback(() => {
     if (timelineRef.current) {
-      dispatchPageState({
+      dispatchAppUiState({
         type: ACTION_TYPES.ON_TIMELINE_RESIZE,
         payload: {
           timelineHeight: timelineRef.current.offsetHeight
@@ -59,17 +57,17 @@ export const PageEnigmaComponent = () => {
       </TopBarHelmet>
       
       <EngineProvider>
-        <AppUIProvider value={[pageState, dispatchPageState]} >
+        <AppUIProvider value={[appUiState, dispatchAppUiState]} >
           <div style={{ height: "calc(100vh - 68px)" }}>
             {/* Engine section/side panel */}
             <div
               id="CanvasUiWrapper"
               className="flex"
-              style={{ height: `calc(100% - ${pageState.timelineHeight}px)` }}
+              style={{ height: `calc(100% - ${appUiState.timelineHeight}px)` }}
               // style={{ height: `calc(100% - 260px` }}
             >
               <div className="relative w-full overflow-hidden bg-transparent">
-                <div className={(pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
+                <div className={(appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
                   <canvas
                     ref={canvasRef}
                     id="video-scene"
@@ -92,7 +90,7 @@ export const PageEnigmaComponent = () => {
                   </div>
                 </div>
                 {
-                  pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
+                  appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
                   <ViewSideBySide />
                 }
               </div>
@@ -104,7 +102,7 @@ export const PageEnigmaComponent = () => {
             </div>
 
             {/* Timeline */}
-            <Timeline timelineHeight={pageState.timelineHeight} />
+            <Timeline timelineHeight={appUiState.timelineHeight} />
           </div>
         </AppUIProvider>
       </EngineProvider>

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

@@ -11,57 +11,61 @@ import { AppUiContext } from '../../contexts/AppUiContext';
 import { ACTION_TYPES } from '../../reducer';
 import { VIEW_MODES } from '../../reducer/types';
 
-export const TabStyling = ()=>{
-  const [pageState, dispatchPageState] = useContext(AppUiContext);
+export const TabStylization = ()=>{
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const [ selection, setSelection ] = useState<string>("Anime");
-  const handlePickingStyle = (picked:string)=>{
+  const handlePickingStylizer = (picked:string)=>{
     console.log(`Picked style: ${picked}`);
     setSelection(picked);
   }
 
 
   const handleChangeViewMode = ()=>{
-    if(dispatchPageState!==null)
-      dispatchPageState({
+    if(dispatchAppUiState!==null){
+      dispatchAppUiState({
         type: ACTION_TYPES.ON_CHANGE_VIEW_MODE,
         payload: {
-          viewMode: pageState?.viewMode === VIEW_MODES.SIDE_BY_SIDE
+          viewMode: appUiState?.viewMode === VIEW_MODES.SIDE_BY_SIDE
             ? VIEW_MODES.EDITOR : VIEW_MODES.SIDE_BY_SIDE,
         }
       })
+    }
   }
   return(
     <>
-      <H4>Select Base Style</H4>
+      <H4>Select Base Stylizer</H4>
       <div className="flex gap-2 my-2">
         <ItemPicker
           label="Anime"
           selected={(selection === "Anime")}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/0.webp"
         />
         <ItemPicker
           label="Pixel"
           selected={selection === "Pixel"}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/1.webp"
         />
         <ItemPicker
           label="Pixar"
           selected={selection === "Pixar"}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/2.webp"
         />
         <ItemPicker
           label="Stylized"
           selected={selection === "Stylized"}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/3.webp"
         />
       </div>
       <H4>Enter a Prompt</H4>
       <div className="flex gap-2 my-2">
-        <Textarea className="w-full h-32"/>
+        <Textarea
+          className="w-full h-32"
+          placeholder="Type here to describe your scene"
+        />
       </div>
       <H4>Negative Prompt</H4>
       <div className="flex gap-2 my-2">
@@ -73,7 +77,7 @@ export const TabStyling = ()=>{
       <div className="flex gap-2 mt-6 justify-center">
         <Button onClick={handleChangeViewMode}>
           { 
-            pageState?.viewMode ===  VIEW_MODES.SIDE_BY_SIDE 
+            appUiState?.viewMode ===  VIEW_MODES.SIDE_BY_SIDE 
             ? "Back to Scene" : "Preview Side by Side"
           }
         </Button>

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

@@ -1,5 +1,5 @@
 import { Tabs } from "~/modules/Tabs";
-import { TabStyling } from "./TabStyling";
+import { TabStylization} from "./TabStylization";
 import { ClipElements } from "./ClipElements";
 
 export const SidePanelTabs = () => {
@@ -19,8 +19,8 @@ export const SidePanelTabs = () => {
           children: <p>Audio Tab</p>,
         },
         {
-          header: "Styling",
-          children: <TabStyling />,
+          header: "Stylization",
+          children: <TabStylization />,
         },
       ]}
     />

app/pages/PageEnigma/comps/ViewSideBySide/index.tsx

@@ -1,9 +1,15 @@
 import {
   useEffect,
   useState,
-} from "react"
+} from "react";
+
+import { LoadingDotsBricks } from "~/components";
 
 export const ViewSideBySide = ()=>{
+  const [showLoader, setShowLoader] = useState(true);
+  useEffect(()=>{
+    setTimeout(()=>setShowLoader(false), 1000);
+  },[ ]);
 
   return (
     <div
@@ -35,6 +41,9 @@ export const ViewSideBySide = ()=>{
           />
         </div>
       </div>
+      <div className="absolute top-0 left-0 w-full h-full">
+        <LoadingDotsBricks show={showLoader} transition/>
+      </div>
     </div>
   )
 }