change opacity + set animation fade

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts

@@ -12,11 +12,11 @@ export const SkeletonTextBlock = styled.div(
     animation: ${pulse} 2s linear infinite;
     background: linear-gradient(
       90deg,
-      ${props.theme.colors?.sideBar.border + '40'} 0%,
-      ${props.theme.colors?.sideBar.border + '40'} 40%,
-      ${props.theme.colors?.sideBar.border + '80'} 50%,
-      ${props.theme.colors?.sideBar.border + '40'} 60%,
-      ${props.theme.colors?.sideBar.border + '40'} 100%
+      ${props.theme.colors?.sideBar.border + '80'} 0%,
+      ${props.theme.colors?.sideBar.border + '80'} 40%,
+      ${props.theme.colors?.sideBar.border + 'd6'} 50%,
+      ${props.theme.colors?.sideBar.border + '80'} 60%,
+      ${props.theme.colors?.sideBar.border + '80'} 100%
     );
     background-size: 200% 200%;
   `

packages/app/src/app/pages/Sandbox/Editor/Skeleton/index.tsx

@@ -15,7 +15,7 @@ import {
   SkeletonWrapper,
 } from './elements';
 
-export const ContentSkeleton = ({ style, onTransitionEnd }) => (
+export const ContentSkeleton = ({ style }) => (
   <SkeletonWrapper style={style}>
     <SkeletonExplorer>
       <SkeletonExplorerContents />

packages/app/src/app/pages/Sandbox/Editor/index.tsx

@@ -40,12 +40,19 @@ const ContentSplit = () => {
     customVSCodeTheme: null,
   });
 
-  useEffect(() =>
-    reaction(
+  useEffect(() => {
+    let timeout;
+    const dispose = reaction(
       reactionState => reactionState.editor.hasLoadedInitialModule,
-      () => setShowSkeleton(false)
-    )
-  );
+      () => {
+        timeout = setTimeout(() => setShowSkeleton(false), 500);
+      }
+    );
+    return () => {
+      dispose();
+      clearTimeout(timeout);
+    };
+  }, [reaction]);
 
   useEffect(() => {
     async function loadTheme() {