loading dots done

app/components/LoadingDots.tsx

@@ -1,11 +1,67 @@
-export const LoadingDotsTyping = ()=>{
-  return(
-    <div className="dot-typing"></div>
-  );
+import { useState, useEffect } from 'react';
+
+interface LoadingDotsProps {
+  show?: boolean;
+  transition?: boolean;
+  transitionDuration?: number;
+};
+
+interface LoadingDotsInnerProps {
+  show?: boolean;
+  transition?: boolean;
+  transitionDuration?: number;
+  children: React.ReactNode;
+};
+
+export const LoadingDotsTyping = (props: LoadingDotsProps)=>{
+  return (
+    <LoadingDots {...props}>
+      <div className="dot-typing"></div>
+    </LoadingDots>
+  )
+}
+export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
+  return (
+    <LoadingDots {...props}>
+      <div className="dot-bricks"></div>
+    </LoadingDots>
+  )
 }
 
-export const LoadingDotsBricks = ()=>{
-  return(
-    <div className="dot-bricks"></div>
-  );
-}
+function LoadingDots({
+  show=true,
+  transition = false,
+  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 = "w-full h-full flex justify-center items-center bg-ui-background " + transitionClasses;
+  useEffect(()=>{
+    if(!show){
+      if(transition){
+        setState((curr)=>{
+          if (curr === 'loading') return 'loaded'
+          else return curr;
+        });
+        setTimeout(()=>setState('completed'), 2000);
+      } else {
+        setState('completed');
+      }
+    }
+  }, [show, transition]);
+
+  if(state!== 'completed'){
+    return(
+      <div className={classNames}>
+        {children}
+      </div>
+    );
+  }else{
+    return null;
+  }
+};
+

app/modules/LoadingScreen/LoadingScreen.tsx

@@ -1,21 +0,0 @@
-import { LoadingDotsBricks } from "~/components";
-
-export const LoadingScreen = ()=>{
-  return(
-    <div
-      id='loading-screen'
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-        <LoadingDotsBricks />
-    </div>
-  );
-};

app/modules/LoadingScreen/index.tsx

@@ -1 +0,0 @@
-export { LoadingScreen } from './LoadingScreen';

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

@@ -1,10 +1,15 @@
-import { useContext } from "react"
+import { useContext, useEffect, useState } from "react"
 import { EngineContext } from "~/contexts/EngineContext"
 
+import { LoadingDotsTyping } from "~/components";
 export const PreviewWindow = ()=>{
   const editorEngine = useContext(EngineContext);
   //take data from egine context
 
+  const [showLoader, setShowLoader] = useState<boolean>(true);
+  useEffect(()=>{
+    setTimeout(()=>setShowLoader(false), 5000);
+  },[]);
   return (
     <div
       id="preview-window"
@@ -17,12 +22,16 @@ export const PreviewWindow = ()=>{
         >
           <p>Camera View</p>
         </div>
-        <div className="rounded-lg border border-white box overflow-hidden">
+        <div className="relative rounded-lg border border-white box overflow-hidden">
+          
           <img
             //shoot that datat from engine context to this image
             className="aspect-video max-h-40" 
             src="/resources/uiAssets/video_player_placeholder.gif"
           />
+          <div className="absolute w-full h-full top-0 left-0">
+            <LoadingDotsTyping show={showLoader} transition/>
+          </div>
         </div>
       </div>
     </div>