feat(dashboard): skeletons for repositories and synced sandboxes (#7017)

olarclara · web-flow · commit 7f9c5d4c08c5 · 2022-10-17T12:50:10.000-03:00
* wip: repository skeleton

* diff between default and repository skeleton

* rename Repo to SyncedSandbox

* synced sandbox skeleton

* different skeleton for synced sandboxes

* wip: simplify

* fixup

* fixup

* pass viewmode as prop to skeletons
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx
@@ -6,7 +6,6 @@ import {
   Input,
   Icon,
   IconButton,
-  SkeletonText,
   Link,
   Tooltip,
 } from '@codesandbox/components';
@@ -388,24 +387,3 @@ const Thumbnail = ({
     </>
   );
 };
-
-export const SkeletonCard = () => (
-  <Stack
-    direction="vertical"
-    gap={4}
-    css={css({
-      width: '100%',
-      height: 240,
-      border: '1px solid',
-      borderColor: 'grays.600',
-      borderRadius: 'medium',
-      overflow: 'hidden',
-    })}
-  >
-    <SkeletonText css={{ width: '100%', height: 120, borderRadius: 0 }} />
-    <Stack direction="vertical" gap={2} marginX={4}>
-      <SkeletonText css={{ width: 120 }} />
-      <SkeletonText css={{ width: 180 }} />
-    </Stack>
-  </Stack>
-);
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx
@@ -9,7 +9,6 @@ import {
   Input,
   ListAction,
   IconButton,
-  SkeletonText,
   Tooltip,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
@@ -198,24 +197,3 @@ export const SandboxListItem = ({
     </Element>
   </ListAction>
 );
-
-export const SkeletonListItem = () => (
-  <Stack
-    paddingX={2}
-    align="center"
-    justify="space-between"
-    css={css({
-      height: 64,
-      paddingX: 2,
-      borderBottom: '1px solid',
-      borderBottomColor: 'grays.600',
-    })}
-  >
-    <Stack align="center" gap={4}>
-      <SkeletonText css={{ height: 32, width: 32 }} />
-      <SkeletonText css={{ width: 120 }} />
-    </Stack>
-    <SkeletonText css={{ width: 120 }} />
-    <SkeletonText css={{ width: 120 }} />
-  </Stack>
-);
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx
@@ -12,8 +12,8 @@ import track, {
 } from '@codesandbox/common/lib/utils/analytics';
 import { Icon } from '@codesandbox/components';
 import { formatNumber } from '@codesandbox/components/lib/components/Stats';
-import { SandboxCard, SkeletonCard } from './SandboxCard';
-import { SandboxListItem, SkeletonListItem } from './SandboxListItem';
+import { SandboxCard } from './SandboxCard';
+import { SandboxListItem } from './SandboxListItem';
 import { getTemplateIcon } from './TemplateIcon';
 import { useSelection } from '../Selection';
 import { DashboardSandbox, DashboardTemplate, PageTypes } from '../../types';
@@ -337,18 +337,3 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
 };
 
 export const Sandbox = GenericSandbox;
-
-export const SkeletonSandbox = () => {
-  const { dashboard } = useAppState();
-
-  const location = useLocation();
-
-  let viewMode;
-  if (location.pathname.includes('archive')) viewMode = 'list';
-  else viewMode = dashboard.viewMode;
-
-  if (viewMode === 'list') {
-    return <SkeletonListItem />;
-  }
-  return <SkeletonCard />;
-};
diff --git a/packages/app/src/app/pages/Dashboard/Components/Skeleton/DefaultSkeleton.tsx b/packages/app/src/app/pages/Dashboard/Components/Skeleton/DefaultSkeleton.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import css from '@styled-system/css';
+
+import { SkeletonText, Stack } from '@codesandbox/components';
+import { ViewMode } from '../../types';
+
+const DefaultSkeletonCard = () => (
+  <Stack
+    direction="vertical"
+    gap={4}
+    css={css({
+      width: '100%',
+      height: 240,
+      border: '1px solid',
+      borderColor: 'grays.600',
+      borderRadius: 'medium',
+      overflow: 'hidden',
+    })}
+  >
+    <SkeletonText css={{ width: '100%', height: 120, borderRadius: 0 }} />
+    <Stack direction="vertical" gap={2} marginX={4}>
+      <SkeletonText css={{ width: 120 }} />
+      <SkeletonText css={{ width: 180 }} />
+    </Stack>
+  </Stack>
+);
+
+const DefaultSkeletonListItem = () => (
+  <Stack
+    paddingX={2}
+    align="center"
+    justify="space-between"
+    css={css({
+      height: 64,
+      paddingX: 2,
+      borderBottom: '1px solid',
+      borderBottomColor: 'grays.600',
+    })}
+  >
+    <Stack align="center" gap={4}>
+      <SkeletonText css={{ height: 32, width: 32 }} />
+      <SkeletonText css={{ width: 120 }} />
+    </Stack>
+    <SkeletonText css={{ width: 120 }} />
+    <SkeletonText css={{ width: 120 }} />
+  </Stack>
+);
+
+export const DefaultSkeleton: React.FC<{ viewMode: ViewMode }> = ({
+  viewMode,
+}) => {
+  return {
+    list: <DefaultSkeletonListItem />,
+    grid: <DefaultSkeletonCard />,
+  }[viewMode];
+};
diff --git a/packages/app/src/app/pages/Dashboard/Components/Skeleton/SolidSkeleton.tsx b/packages/app/src/app/pages/Dashboard/Components/Skeleton/SolidSkeleton.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import css from '@styled-system/css';
+
+import { Column, Grid, SkeletonText, Stack } from '@codesandbox/components';
+import { ViewMode } from '../../types';
+
+export const SolidCardSkeleton: React.FC = () => (
+  <Stack
+    direction="vertical"
+    gap={4}
+    css={css({
+      width: '100%',
+      height: 240,
+      border: '1px solid',
+      borderColor: 'grays.600',
+      borderRadius: '4px',
+      overflow: 'hidden',
+    })}
+  >
+    <SkeletonText css={{ width: '100%', height: '100%' }} />
+  </Stack>
+);
+
+export const SolidListItemSkeleton: React.FC = () => (
+  <Stack>
+    <Grid css={{ width: 'calc(100% - 26px - 8px)' }}>
+      <Column
+        span={[12, 5, 5]}
+        css={{
+          display: 'block',
+          overflow: 'hidden',
+          paddingBottom: 4,
+          paddingTop: 4,
+        }}
+      >
+        <Stack gap={4} align="center" marginLeft={2}>
+          <SkeletonText
+            css={css({
+              width: '16px',
+            })}
+          />
+          <SkeletonText />
+        </Stack>
+      </Column>
+      <Column span={[0, 4, 4]} as={Stack} align="center">
+        <SkeletonText />
+      </Column>
+    </Grid>
+  </Stack>
+);
+
+export const SolidSkeleton: React.FC<{ viewMode: ViewMode }> = ({
+  viewMode,
+}) => {
+  return {
+    list: <SolidListItemSkeleton />,
+    grid: <SolidCardSkeleton />,
+  }[viewMode];
+};
diff --git a/packages/app/src/app/pages/Dashboard/Components/Skeleton/index.ts b/packages/app/src/app/pages/Dashboard/Components/Skeleton/index.ts
@@ -0,0 +1,2 @@
+export { DefaultSkeleton } from './DefaultSkeleton';
+export { SolidSkeleton } from './SolidSkeleton';
diff --git a/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/Icons.tsx b/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/Icons.tsx
diff --git a/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxCard.tsx b/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxCard.tsx
@@ -3,7 +3,7 @@ import { Stack, Text, Icon } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { noop } from 'overmind';
 
-export const RepoCard = ({
+export const SyncedSandboxCard = ({
   name,
   path,
   // interactions
diff --git a/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxListItem.tsx
@@ -10,7 +10,7 @@ import {
 import { noop } from 'overmind';
 import css from '@styled-system/css';
 
-export const RepoListItem = ({
+export const SyncedSandboxListItem = ({
   name,
   path,
   // interactions
diff --git a/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/index.tsx b/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/index.tsx
@@ -1,15 +1,20 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useAppState } from 'app/overmind';
-import { RepoCard } from './RepoCard';
-import { RepoListItem } from './RepoListItem';
+import { SyncedSandboxCard } from './SyncedSandboxCard';
+import { SyncedSandboxListItem } from './SyncedSandboxListItem';
 import { useSelection } from '../Selection';
 import { DashboardRepo } from '../../types';
 
-export const Repo = ({ name = '', path = null, ...props }: DashboardRepo) => {
+export const SyncedSandbox = ({
+  name = '',
+  path = null,
+  ...props
+}: DashboardRepo) => {
   const { dashboard } = useAppState();
 
-  const Component = dashboard.viewMode === 'list' ? RepoListItem : RepoCard;
+  const Component =
+    dashboard.viewMode === 'list' ? SyncedSandboxListItem : SyncedSandboxCard;
 
   // interactions
   const {
diff --git a/packages/app/src/app/pages/Dashboard/Components/VariableGrid/index.tsx b/packages/app/src/app/pages/Dashboard/Components/VariableGrid/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { Link as RouterLink, useLocation, useParams } from 'react-router-dom';
 import { useAppState } from 'app/overmind';
 import { Element, Stack, Text, Link } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { VariableSizeGrid, areEqual } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { Sandbox, SkeletonSandbox } from '../Sandbox';
+import { Sandbox } from '../Sandbox';
 import { NewSandbox } from '../Sandbox/NewSandbox';
 import { NewMasterSandbox } from '../Sandbox/NewMasterSandbox';
 import { Folder } from '../Folder';
-import { Repo } from '../Repo';
+import { SyncedSandbox } from '../SyncedSandbox';
 import { CommunitySandbox } from '../CommunitySandbox';
 import { EmptyScreen } from '../EmptyScreen';
 import {
@@ -37,6 +37,7 @@ import { Branch } from '../Branch';
 import { Repository } from '../Repository';
 import { NewBranchCard } from '../Branch/NewBranch';
 import { ImportRepositoryCard } from '../Repository/ImportRepository';
+import { DefaultSkeleton, SolidSkeleton } from '../Skeleton';
 
 export const GRID_MAX_WIDTH = 3840;
 export const MAX_COLUMN_COUNT = 10;
@@ -78,7 +79,8 @@ interface IComponentForTypes {
   header: React.FC<DecoratedItemProps<DashboardHeader>>;
   'header-link': React.FC<DecoratedItemProps<DashboardHeaderLink>>;
   blank: React.FC<DecoratedItemProps<DashboardBlank>>;
-  skeleton: React.FC<DecoratedItemProps<DashboardSkeleton>>;
+  'default-skeleton': React.FC<DecoratedItemProps<DashboardSkeleton>>;
+  'solid-skeleton': React.FC<DecoratedItemProps<DashboardSkeleton>>;
   'community-sandbox': React.FC<DecoratedItemProps<DashboardCommunitySandbox>>;
   branch: React.FC<DecoratedItemProps<DashboardBranch>>;
   'new-branch': React.FC<DecoratedItemProps<DashboardNewBranch>>;
@@ -103,7 +105,9 @@ const ComponentForTypes: IComponentForTypes = {
     />
   )),
   folder: props => <Folder key={props.item.name} {...props.item} />,
-  repo: props => <Repo {...props.item} isScrolling={props.isScrolling} />,
+  repo: props => (
+    <SyncedSandbox {...props.item} isScrolling={props.isScrolling} />
+  ),
   'new-folder': props => <CreateFolder {...props.item} />,
   'new-sandbox': () => <NewSandbox />,
   'new-master-branch': props => <NewMasterSandbox {...props.item} />,
@@ -137,7 +141,10 @@ const ComponentForTypes: IComponentForTypes = {
     </Link>
   ),
   blank: () => <div />,
-  skeleton: () => <SkeletonSandbox />,
+  'default-skeleton': ({ item }) => (
+    <DefaultSkeleton viewMode={item.viewMode} />
+  ),
+  'solid-skeleton': ({ item }) => <SolidSkeleton viewMode={item.viewMode} />,
   'community-sandbox': React.memo(props => (
     <CommunitySandbox item={props.item} isScrolling={props.isScrolling} />
   )),
@@ -149,6 +156,17 @@ const ComponentForTypes: IComponentForTypes = {
   'import-repository': () => <ImportRepositoryCard />,
 };
 
+const getSkeletonForPage = (
+  page: PageTypes,
+  path: string
+): DashboardSkeleton['type'] => {
+  if ((page === 'synced-sandboxes' || page === 'repositories') && !path) {
+    return 'solid-skeleton';
+  }
+
+  return 'default-skeleton';
+};
+
 const Item = React.memo(
   ({ data, rowIndex, columnIndex, style, isScrolling }: WindowItemProps) => {
     const { columnCount, filledItems, containerWidth, viewMode, page } = data;
@@ -236,6 +254,8 @@ export const VariableGrid = ({
 }: VariableGridProps) => {
   const { dashboard } = useAppState();
   const location = useLocation();
+  const params = useParams<{ path: string }>();
+  const path = params.path ?? '';
 
   let viewMode: 'grid' | 'list';
   if (location.pathname.includes('archive')) viewMode = 'list';
@@ -328,8 +348,11 @@ export const VariableGrid = ({
               viewMode?: 'list' | 'grid';
             }
           > = [];
-          const blankItem = { type: 'blank' as 'blank' };
-          const skeletonItem = { type: 'skeleton' as 'skeleton' };
+          const blankItem = { type: 'blank' as const };
+          const skeletonItem = {
+            type: getSkeletonForPage(page, path),
+            viewMode,
+          };
 
           items.forEach((item, index) => {
             if (
diff --git a/packages/app/src/app/pages/Dashboard/types.ts b/packages/app/src/app/pages/Dashboard/types.ts
@@ -9,11 +9,14 @@ import {
   User,
   Maybe,
 } from 'app/graphql/types';
+import { Context } from 'app/overmind';
 import {
   PageTypes as PT,
   DELETE_ME_COLLECTION,
 } from 'app/overmind/namespaces/dashboard/types';
 
+export type ViewMode = Context['state']['dashboard']['viewMode'];
+
 export type DashboardBaseFolder = {
   name: string;
   path: string;
@@ -105,7 +108,8 @@ export type DashboardBlankRowFill = {
 };
 
 export type DashboardSkeleton = {
-  type: 'skeleton';
+  type: 'default-skeleton' | 'solid-skeleton';
+  viewMode: ViewMode;
 };
 
 export type DashboardNewMasterBranch = {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { DefaultSkeleton } from './DefaultSkeleton';`
	`2`	`+export { SolidSkeleton } from './SolidSkeleton';`