Enhancements to skeleton (codesandbox#3724)

Author: siddharthkp

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

@@ -1,26 +1,48 @@
 import styled, { css, keyframes } from 'styled-components';
+import Color from 'color';
 
 const pulse = keyframes`
   0% { background-position: 100% 50%; }
   100% { background-position: -100% 50%; }
 `;
 
-export const SkeletonTextBlock = styled.div(
-  props => css`
+export const SkeletonTextBlock = styled.div(props => {
+  const color = props.theme.colors?.sideBar.border || '#242424';
+  const themeType = props.theme.vscodeTheme.type;
+
+  /**
+   * This is fun,
+   * We animate the background gradient to create a pulse animation
+   *
+   * To support all themes nicely, we can't really pick a value from the theme
+   * So, we take the sidebar.border and then change it's luminosity
+   * 14% for background and 16% for the pulse highlight on top
+   * We need to set the value to 100 - value for light themes
+   */
+
+  const backgroundLuminosity = themeType === 'light' ? 86 : 14;
+  const highlightLuminosity = themeType === 'light' ? 88 : 16;
+
+  const hsl = Color(color).hsl();
+  const background = Color({ ...hsl, l: backgroundLuminosity }).hslString();
+  const highlight = Color({ ...hsl, l: highlightLuminosity }).hslString();
+
+  return css`
     height: 16px;
     width: 200px;
-    animation: ${pulse} 2s linear infinite;
+    opacity: 0.7;
+    animation: ${pulse} 4s linear infinite;
     background: linear-gradient(
       90deg,
-      ${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} 0%,
+      ${background} 20%,
+      ${highlight} 50%,
+      ${background} 80%,
+      ${background} 100%
     );
     background-size: 200% 200%;
-  `
-);
+  `;
+});
 
 export const SkeletonWrapper = styled.div`
   position: absolute;

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

@@ -43,12 +43,12 @@ const SkeletonExplorerContents = () => (
   <>
     <Collapsible title="Files" defaultOpen>
       <List>
-        <File type="folder" />
-        <File type="folder" />
-        <File type="file" nested />
-        <File type="file" nested />
-        <File type="file" nested />
-        <File type="file" />
+        <File />
+        <File />
+        <File />
+        <File />
+        <File />
+        <File />
       </List>
     </Collapsible>
     <Collapsible title="Dependencies" defaultOpen>
@@ -66,15 +66,12 @@ export const File = props => (
   <ListItem
     justify="space-between"
     align="center"
-    css={{
-      minHeight: '28px',
-      paddingLeft: `calc(${props.nested ? 2 : 1}rem - 2px)`,
-    }}
+    css={css({ paddingLeft: 3, minHeight: 7 })}
     {...props}
   >
     <Stack gap={2} align="center" css={css({ color: 'sideBar.border' })}>
-      <span style={{ opacity: 0.5 }}>{icons[props.type]}</span>{' '}
-      <SkeletonTextBlock />
+      <SkeletonTextBlock css={css({ width: 5 })} />
+      <SkeletonTextBlock css={{ width: 'calc(200px - 28px)' }} />
     </Stack>
   </ListItem>
 );
@@ -84,31 +81,3 @@ const Dependency = () => (
     <SkeletonTextBlock />
   </ListItem>
 );
-
-const icons = {
-  folder: (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6.86667 2L8.33333 3.46667H14.2C15 3.46667 15.6667 4.13333 15.6667 4.93333V12.4C15.6667 13.2 15 13.8667 14.2 13.8667H2.46667C1.66667 14 1 13.3333 1 12.5333V3.46667C1 2.66667 1.66667 2 2.46667 2H6.86667Z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  file: (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="12" height="12" rx="2" fill="currentColor" />
-    </svg>
-  ),
-};