engine editor loading screen

app/components/LoadingDots.tsx

@@ -1,12 +1,15 @@
 import { useState, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 interface LoadingDotsProps {
+  className?: string;
   show?: boolean;
   transition?: boolean;
   transitionDuration?: number;
 };
 
 interface LoadingDotsInnerProps {
+  className?: string;
   show?: boolean;
   transition?: boolean;
   transitionDuration?: number;
@@ -29,6 +32,7 @@ export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
 }
 
 function LoadingDots({
+  className,
   show=true,
   transition = false,
   transitionDuration = 1000,
@@ -39,7 +43,7 @@ function LoadingDots({
     (transition ? `transition-opacity duration-${transitionDuration} `: "")
     + (state === 'loading' ? 'opacity-100' : 'opacity-0');
 
-  const classNames = "w-full h-full flex justify-center items-center bg-ui-background " + transitionClasses;
+  const classNames = twMerge("w-full h-full flex justify-center items-center bg-ui-background ",transitionClasses, className);
   useEffect(()=>{
     if(!show){
       if(transition){

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useReducer } from "react";
+import { useEffect, useRef, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
@@ -22,34 +22,11 @@ export const PageEnigmaComponent = () => {
   const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState);
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const timelineRef = useRef<HTMLDivElement | null>(null);
-
-  const updateTimelineHeight = useCallback(() => {
-    if (timelineRef.current) {
-      dispatchAppUiState({
-        type: ACTION_TYPES.ON_TIMELINE_RESIZE,
-        payload: {
-          timelineHeight: timelineRef.current.offsetHeight
-        }
-      })
-    }
-  }, []);
-
-  //for updating timeline/engine div height (for resizing)
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        updateTimelineHeight();
-      }
-    });
-
-    if (timelineRef.current) {
-      observer.observe(timelineRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, [updateTimelineHeight]);
-
+  useEffect(()=>{
+    setTimeout(()=>dispatchAppUiState({
+      type: ACTION_TYPES.HIDE_EDITOR_LOADER
+    }), 3000);
+  },[]);
   return (
     <div>
       <TopBarHelmet>
@@ -93,6 +70,11 @@ export const PageEnigmaComponent = () => {
                   appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
                   <ViewSideBySide />
                 }
+                <LoadingDotsBricks
+                  className="absolute top-0 left-0"
+                  show={appUiState.showEditorLoader}
+                  transition
+                />
               </div>
               
               {/* Side panel */}

app/pages/PageEnigma/reducer/index.tsx

@@ -3,7 +3,8 @@ import {reducer} from './reducer';
 
 const initialState:State = {
   timelineHeight: 260,
-  viewMode: VIEW_MODES.EDITOR
+  viewMode: VIEW_MODES.EDITOR,
+  showEditorLoader: true
 }
 
 export type {State, Action};

app/pages/PageEnigma/reducer/reducer.tsx

@@ -2,6 +2,18 @@ import { State, Action, ACTION_TYPES} from './types';
 
 export function reducer(state: State, action: Action): State {
   switch(action.type){
+    case ACTION_TYPES.SHOW_EDITOR_LOADER:{
+      return{
+        ...state,
+        showEditorLoader: true,
+      }
+    }
+    case ACTION_TYPES.HIDE_EDITOR_LOADER:{
+      return{
+        ...state,
+        showEditorLoader: false,
+      }
+    }
     case ACTION_TYPES.ON_TIMELINE_RESIZE:{
       return{
         ...state,

app/pages/PageEnigma/reducer/types.tsx

@@ -7,16 +7,21 @@ type ViewModes = VIEW_MODES.EDITOR | VIEW_MODES.SIDE_BY_SIDE;
 
 export type State = {
   viewMode: ViewModes;
-  timelineHeight: number
+  timelineHeight: number;
+  showEditorLoader: boolean;
 };
 
 
 export enum ACTION_TYPES {
   ON_TIMELINE_RESIZE = "on_timeline_resize",
-  ON_CHANGE_VIEW_MODE = "on_change_view_mode"
+  ON_CHANGE_VIEW_MODE = "on_change_view_mode",
+  SHOW_EDITOR_LOADER = "show_editor_loader",
+  HIDE_EDITOR_LOADER = "hide_editor_loader",
 };
 
 export type Action = 
+  | {type: ACTION_TYPES.SHOW_EDITOR_LOADER,}
+  | {type: ACTION_TYPES.HIDE_EDITOR_LOADER,}
   | {
       type: ACTION_TYPES.ON_TIMELINE_RESIZE, 
       payload: {
@@ -28,4 +33,5 @@ export type Action =
     payload: {
       viewMode: ViewModes
     }
-  };
+  }
+  ;