Skip to content

Commit 8f6ebab

Browse files
siddharthkpsiddharthkp
authored
Loading skeletons for dashboard (codesandbox#4015)
1 parent 92035d1 commit 8f6ebab

File tree

11 files changed

+207
-115
lines changed

11 files changed

+207
-115
lines changed

‎packages/app/src/app/pages/NewDashboard/Components/Sandbox/index.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import { withRouter } from 'react-router-dom';
3-
import { Element } from '@codesandbox/components';
43
import { useOvermind } from 'app/overmind';
54
import { SandboxItem } from '../SandboxItem';
65
import { SandboxCard } from '../SandboxCard';
@@ -11,11 +10,7 @@ export const SandboxComponent = props => {
1110
} = useOvermind();
1211

1312
if (dashboard.viewMode === 'list' || props.match.path.includes('deleted')) {
14-
return (
15-
<Element style={{ gridColumn: '1/-1' }}>
16-
<SandboxItem {...props} />
17-
</Element>
18-
);
13+
return <SandboxItem {...props} />;
1914
}
2015
return <SandboxCard {...props} />;
2116
};

‎packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import React, { useState } from 'react';
2-
import { Stack, Element, Text, Stats, Input } from '@codesandbox/components';
2+
import {
3+
Stack,
4+
Element,
5+
Text,
6+
Stats,
7+
Input,
8+
SkeletonText,
9+
} from '@codesandbox/components';
310
import css from '@styled-system/css';
411
import { useOvermind } from 'app/overmind';
512
import { MenuOptions } from './Menu';
@@ -93,3 +100,26 @@ const kFormatter = (num: number): string => {
93100

94101
return num.toString();
95102
};
103+
104+
export const SkeletonCard = () => (
105+
<Stack
106+
direction="vertical"
107+
gap={4}
108+
css={css({
109+
width: '100%',
110+
height: 240,
111+
border: '1px solid',
112+
borderColor: 'grays.600',
113+
borderRadius: 'medium',
114+
overflow: 'hidden',
115+
transition: 'all ease-in-out',
116+
transitionDuration: theme => theme.speeds[4],
117+
})}
118+
>
119+
<SkeletonText css={{ width: '100%', height: 160 }} />
120+
<Stack direction="vertical" gap={2} marginX={4}>
121+
<SkeletonText css={{ width: 120 }} />
122+
<SkeletonText css={{ width: 180 }} />
123+
</Stack>
124+
</Stack>
125+
);

‎packages/app/src/app/pages/NewDashboard/Components/SandboxGrid/index.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Grid } from '@codesandbox/components';
3+
import css from '@styled-system/css';
4+
5+
export const SandboxGrid = props => (
6+
<Grid
7+
rowGap={6}
8+
columnGap={6}
9+
marginBottom={8}
10+
css={css({
11+
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
12+
})}
13+
>
14+
{props.children}
15+
</Grid>
16+
);

‎packages/app/src/app/pages/NewDashboard/Content/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const Content = () => {
2323

2424
return (
2525
<Element
26-
as="main"
2726
css={css({
2827
maxWidth: 992,
2928
paddingX: 4,

‎packages/app/src/app/pages/NewDashboard/Content/routes/All/index.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Element, Grid } from '@codesandbox/components';
3-
4-
import css from '@styled-system/css';
52
import { withRouter } from 'react-router-dom';
6-
import { Header } from 'app/pages/NewDashboard/Components/Header';
73
import { useOvermind } from 'app/overmind';
8-
import { Loading } from 'app/pages/NewDashboard/Components/Loading';
4+
import { Element, Column } from '@codesandbox/components';
5+
import { Header } from 'app/pages/NewDashboard/Components/Header';
96
import { getPossibleTemplates } from '../../utils';
7+
import { SandboxGrid } from '../../../Components/SandboxGrid';
108
import { Sandbox } from '../../../Components/Sandbox';
119
import { FolderCard } from '../../../Components/FolderCard';
10+
import { SkeletonCard } from '../../../Components/SandboxCard';
1211

1312
export const AllPage = ({ match: { params }, history }) => {
1413
const [level, setLevel] = useState(0);
@@ -54,25 +53,28 @@ export const AllPage = ({ match: { params }, history }) => {
5453
<Element style={{ height: '100%', position: 'relative' }}>
5554
<Header path={param} templates={getPossibleTemplates(allCollections)} />
5655
{allCollections ? (
57-
<Grid
58-
rowGap={6}
59-
columnGap={6}
60-
marginBottom={8}
61-
css={css({
62-
gridTemplateColumns: 'repeat(auto-fit,minmax(220px,0.2fr))',
63-
})}
64-
>
56+
<SandboxGrid>
6557
{getFoldersByPath.map(folder => (
66-
<FolderCard key={folder.id} {...folder} />
58+
<Column>
59+
<FolderCard key={folder.id} {...folder} />
60+
</Column>
6761
))}
6862
{sandboxes.ALL &&
6963
sandboxes.ALL[cleanParam] &&
7064
sandboxes.ALL[cleanParam].map(sandbox => (
71-
<Sandbox key={sandbox.id} sandbox={sandbox} />
65+
<Column>
66+
<Sandbox key={sandbox.id} sandbox={sandbox} />
67+
</Column>
7268
))}
73-
</Grid>
69+
</SandboxGrid>
7470
) : (
75-
<Loading />
71+
<SandboxGrid>
72+
{Array.from(Array(8).keys()).map(n => (
73+
<Column key={n}>
74+
<SkeletonCard />
75+
</Column>
76+
))}
77+
</SandboxGrid>
7678
)}
7779
</Element>
7880
);

‎packages/app/src/app/pages/NewDashboard/Content/routes/Drafts/index.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { useEffect } from 'react';
2-
import { Element, Grid } from '@codesandbox/components';
32
import { useOvermind } from 'app/overmind';
43
import { sandboxesTypes } from 'app/overmind/namespaces/dashboard/state';
5-
import css from '@styled-system/css';
6-
import { Header } from 'app/pages/NewDashboard/Components/Header';
7-
import { Loading } from 'app/pages/NewDashboard/Components/Loading';
4+
import { Element, Column } from '@codesandbox/components';
5+
86
import { getPossibleTemplates } from '../../utils';
7+
import { Header } from '../../../Components/Header';
8+
9+
import { SandboxGrid } from '../../../Components/SandboxGrid';
910
import { Sandbox } from '../../../Components/Sandbox';
11+
import { SkeletonCard } from '../../../Components/SandboxCard';
1012
import { useBottomScroll } from './useBottomScroll';
1113

1214
export const Drafts = () => {
@@ -29,20 +31,19 @@ export const Drafts = () => {
2931
templates={getPossibleTemplates(sandboxes.DRAFTS)}
3032
/>
3133
{sandboxes.DRAFTS ? (
32-
<Grid
33-
rowGap={6}
34-
columnGap={6}
35-
marginBottom={8}
36-
css={css({
37-
gridTemplateColumns: 'repeat(auto-fit,minmax(220px,0.2fr))',
38-
})}
39-
>
34+
<SandboxGrid>
4035
{visibleSandboxes.map(sandbox => (
4136
<Sandbox key={sandbox.id} sandbox={sandbox} />
4237
))}
43-
</Grid>
38+
</SandboxGrid>
4439
) : (
45-
<Loading />
40+
<SandboxGrid>
41+
{Array.from(Array(8).keys()).map(n => (
42+
<Column key={n}>
43+
<SkeletonCard />
44+
</Column>
45+
))}
46+
</SandboxGrid>
4647
)}
4748
</Element>
4849
);

‎packages/app/src/app/pages/NewDashboard/Content/routes/Recent/SandboxesGroup.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2-
import { Text, Element, Grid } from '@codesandbox/components';
3-
import css from '@styled-system/css';
42
import { useOvermind } from 'app/overmind';
3+
import { Text, Column } from '@codesandbox/components';
54
import { Sandbox } from '../../../Components/Sandbox';
5+
import { SandboxGrid } from '../../../Components/SandboxGrid';
6+
import { SkeletonCard } from '../../../Components/SandboxCard';
67

78
export const SandboxesGroup = ({ title, time }) => {
89
const {
@@ -12,22 +13,32 @@ export const SandboxesGroup = ({ title, time }) => {
1213
} = useOvermind();
1314

1415
return getFilteredSandboxes(recentSandboxesByTime[time]).length ? (
15-
<Element marginBottom={14}>
16+
<>
1617
<Text marginBottom={6} block>
1718
{title}
1819
</Text>
19-
<Grid
20-
rowGap={6}
21-
columnGap={6}
22-
marginBottom={8}
23-
css={css({
24-
gridTemplateColumns: 'repeat(auto-fit,minmax(220px,0.2fr))',
25-
})}
26-
>
20+
<SandboxGrid>
2721
{getFilteredSandboxes(recentSandboxesByTime[time]).map(sandbox => (
28-
<Sandbox key={sandbox.id} sandbox={sandbox} />
22+
<Column>
23+
<Sandbox key={sandbox.id} sandbox={sandbox} />
24+
</Column>
2925
))}
30-
</Grid>
31-
</Element>
26+
</SandboxGrid>
27+
</>
3228
) : null;
3329
};
30+
31+
export const SkeletonGroup = ({ title, time }) => (
32+
<>
33+
<Text marginBottom={6} block>
34+
{title}
35+
</Text>
36+
<SandboxGrid>
37+
{Array.from(Array(4).keys()).map(n => (
38+
<Column key={n}>
39+
<SkeletonCard />
40+
</Column>
41+
))}
42+
</SandboxGrid>
43+
</>
44+
);

‎packages/app/src/app/pages/NewDashboard/Content/routes/Recent/index.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useEffect } from 'react';
22
import { useOvermind } from 'app/overmind';
3+
import { Stack } from '@codesandbox/components';
34
import { sandboxesTypes } from 'app/overmind/namespaces/dashboard/state';
4-
import { Loading } from 'app/pages/NewDashboard/Components/Loading';
55
import { Header } from 'app/pages/NewDashboard/Components/Header';
66
import { getPossibleTemplates } from '../../utils';
77

8-
import { SandboxesGroup } from './SandboxesGroup';
8+
import { SandboxesGroup, SkeletonGroup } from './SandboxesGroup';
99

1010
export const Recent = () => {
1111
const {
@@ -27,14 +27,19 @@ export const Recent = () => {
2727
/>
2828
<section style={{ position: 'relative' }}>
2929
{sandboxes.RECENT ? (
30-
<>
30+
<Stack as="section" direction="vertical" gap={8}>
3131
<SandboxesGroup title="Today" time="day" />
3232
<SandboxesGroup title="Last 7 Days" time="week" />
3333
<SandboxesGroup title="Earlier this month" time="month" />
3434
<SandboxesGroup title="Older" time="older" />
35-
</>
35+
</Stack>
3636
) : (
37-
<Loading />
37+
<Stack as="section" direction="vertical" gap={8}>
38+
<SkeletonGroup title="Today" time="day" />
39+
<SkeletonGroup title="Last 7 Days" time="week" />
40+
<SkeletonGroup title="Earlier this month" time="month" />
41+
<SkeletonGroup title="Older" time="older" />
42+
</Stack>
3843
)}
3944
</section>
4045
</>

0 commit comments

Comments
 (0)