typo fix, merge

app/components/LoadingDots.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import { H4 } from '.';
+
 interface LoadingDotsProps {
   className?: string;
   show?: boolean;
@@ -11,39 +13,37 @@ interface LoadingDotsProps {
 interface LoadingDotsInnerProps {
   className?: string;
   show?: boolean;
+  type?: 'typing'|'bricks';
+  message?: string;
   transition?: boolean;
   transitionDuration?: number;
-  children: React.ReactNode;
 };
 
 export const LoadingDotsTyping = (props: LoadingDotsProps)=>{
   return (
-    <LoadingDots {...props}>
-      <div className="dot-typing"></div>
-    </LoadingDots>
+    <LoadingDots {...props} />
   )
 }
 export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
   return (
-    <LoadingDots {...props}>
-      <div className="dot-bricks"></div>
-    </LoadingDots>
+    <LoadingDots {...props} type="bricks"/>
   )
 }
 
-function LoadingDots({
+export function LoadingDots({
   className,
   show=true,
   transition = false,
+  type = 'typing',
+  message,
   transitionDuration = 1000,
-  children,
 }: LoadingDotsInnerProps){
   const [state, setState] = useState<'loading'|'loaded'|'completed'>('loading');
   const transitionClasses =
     (transition ? `transition-opacity duration-${transitionDuration} `: "")
     + (state === 'loading' ? 'opacity-100' : 'opacity-0');
 
-  const classNames = twMerge("w-full h-full flex justify-center items-center bg-ui-background ",transitionClasses, className);
+  const classNames = twMerge("w-full h-full flex flex-col justify-center items-center bg-ui-background gap-6",transitionClasses, className);
   useEffect(()=>{
     if(!show){
       if(transition){
@@ -66,7 +66,16 @@ function LoadingDots({
   if(state!== 'completed'){
     return(
       <div className={classNames}>
-        {children}
+        { type==='typing' &&
+          <div className="dot-typing"></div>
+        }
+        { type==='bricks' &&
+          <div className="dot-bricks"></div>
+        }
+        {
+          message &&
+          <H4>{message}</H4>
+        }
       </div>
     );
   }else{

app/components/index.tsx

@@ -7,7 +7,7 @@ import { H4 } from "./H4";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
 import { LoadingBar } from "./LoadingBar";
-import { LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
+import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
 export {
   Button,
@@ -19,6 +19,7 @@ export {
   Textarea,
   Input,
   LoadingBar,
+  LoadingDots,
   LoadingDotsBricks,
   LoadingDotsTyping,
 };

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -2,7 +2,7 @@ import { useEffect, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
-import { Button, LoadingDotsBricks } from "~/components";
+import { Button, LoadingDots } from "~/components";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
@@ -69,9 +69,11 @@ export const PageEnigmaComponent = () => {
                   appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
                   <ViewSideBySide />
                 }
-                <LoadingDotsBricks
+                <LoadingDots
                   className="absolute top-0 left-0"
-                  show={appUiState.showEditorLoader}
+                  show={appUiState.showEditorLoader.isShow}
+                  type="bricks"
+                  message={appUiState.showEditorLoader.message}
                   transition
                 />
               </div>

app/pages/PageEnigma/reducer/index.tsx

@@ -4,7 +4,10 @@ import {reducer} from './reducer';
 const initialState:State = {
   timelineHeight: 260,
   viewMode: VIEW_MODES.EDITOR,
-  showEditorLoader: true
+  showEditorLoader: {
+    isShow:true,
+    message: 'loading Editor Engine 🦊'
+  }
 }
 
 export type {State, Action};

app/pages/PageEnigma/reducer/reducer.tsx

@@ -5,13 +5,19 @@ export function reducer(state: State, action: Action): State {
     case ACTION_TYPES.SHOW_EDITOR_LOADER:{
       return{
         ...state,
-        showEditorLoader: true,
+        showEditorLoader: {
+          isShow: true,
+          message: action.payload?.showEditorLoader.message || undefined,
+        },
       }
     }
     case ACTION_TYPES.HIDE_EDITOR_LOADER:{
       return{
         ...state,
-        showEditorLoader: false,
+        showEditorLoader: {
+          isShow: false,
+          message: state.showEditorLoader.message
+        },
       }
     }
     case ACTION_TYPES.ON_TIMELINE_RESIZE:{

app/pages/PageEnigma/reducer/types.tsx

@@ -8,7 +8,10 @@ type ViewModes = VIEW_MODES.EDITOR | VIEW_MODES.SIDE_BY_SIDE;
 export type State = {
   viewMode: ViewModes;
   timelineHeight: number;
-  showEditorLoader: boolean;
+  showEditorLoader: {
+    isShow:boolean
+    message:string|undefined;
+  };
 };
 
 
@@ -20,8 +23,15 @@ export enum ACTION_TYPES {
 };
 
 export type Action = 
-  | {type: ACTION_TYPES.SHOW_EDITOR_LOADER,}
   | {type: ACTION_TYPES.HIDE_EDITOR_LOADER,}
+  | {
+      type: ACTION_TYPES.SHOW_EDITOR_LOADER,
+      payload?:{
+        showEditorLoader: {
+          message:string|undefined;
+        }
+      }
+    }
   | {
       type: ACTION_TYPES.ON_TIMELINE_RESIZE, 
       payload: {