Skip to content

Commit 5b36bbc

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/1.38.1 into main branch (#803)
* add LoadingSkeleton (#800) * Adding contentCenterOverflow prop to LoadingOverlay (#802)
1 parent 92fc555 commit 5b36bbc

File tree

8 files changed

+209
-1
lines changed

8 files changed

+209
-1
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "1.38.0",
3+
"version": "1.38.1",
44
"dependencies": {
55
"react-bootstrap": "^2.5.0",
6+
"react-loading-skeleton": "^3.1.0",
67
"react-router-dom": "^5.2.0",
78
"react-select": "^5.0.0",
89
"react-toggle": "4.1.1",

‎src/LoadingOverlay/LoadingOverlay.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const LoadingOverlay = (props) => {
1414
{
1515
'overlay--text': !!props.text,
1616
'overlay--content-top': props.contentTop,
17+
'overlay--content-center-overflow': props.contentCenterOverflow,
1718
},
1819
);
1920

@@ -36,6 +37,7 @@ const LoadingOverlay = (props) => {
3637
};
3738

3839
LoadingOverlay.propTypes = {
40+
contentCenterOverflow: PropTypes.bool,
3941
contentTop: PropTypes.bool,
4042
dataTestid: PropTypes.string,
4143
header: PropTypes.string,
@@ -45,6 +47,7 @@ LoadingOverlay.propTypes = {
4547
};
4648

4749
LoadingOverlay.defaultProps = {
50+
contentCenterOverflow: false,
4851
contentTop: false,
4952
dataTestid: 'LoadingOverlay',
5053
header: undefined,

‎src/LoadingSkeleton/LoadingSkeleton.jsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
5+
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
6+
import 'react-loading-skeleton/dist/skeleton.css';
7+
8+
import colors from '../Styles/colors/palette';
9+
10+
const LoadingSkeleton = ({ className, ...props }) => (
11+
<SkeletonTheme baseColor={colors.UX_GRAY_300}>
12+
<Skeleton
13+
className={classNames('LoadingSkeleton', className)}
14+
{...props}
15+
/>
16+
</SkeletonTheme>
17+
);
18+
19+
LoadingSkeleton.propTypes = {
20+
/**
21+
The border radius of the skeleton.
22+
*/
23+
borderRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
24+
/**
25+
Makes the skeleton circular by setting border-radius to 50%.
26+
*/
27+
circle: PropTypes.bool,
28+
className: PropTypes.string,
29+
/**
30+
A custom class name for the `<span>` that wraps the individual skeleton elements.
31+
*/
32+
containerClassName: PropTypes.string,
33+
/**
34+
A string that is added to the container element as a data-testid attribute.
35+
Use it with screen.getByTestId('...') from React Testing Library.
36+
*/
37+
containerTestId: PropTypes.string,
38+
/**
39+
The number of lines of skeletons to render. If count is a decimal number like 3.5,
40+
three full skeletons and one half-width skeleton will be rendered.
41+
*/
42+
count: PropTypes.number,
43+
/**
44+
The height of the skeleton.
45+
*/
46+
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
47+
/**
48+
By default, a `<br />` is inserted after each skeleton so that each skeleton gets its own line.
49+
When inline is true, no line breaks are inserted.
50+
*/
51+
inline: PropTypes.bool,
52+
/**
53+
The width of the skeleton.
54+
*/
55+
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
56+
};
57+
58+
LoadingSkeleton.defaultProps = {
59+
borderRadius: '0.25rem',
60+
className: undefined,
61+
circle: false,
62+
containerClassName: undefined,
63+
containerTestId: undefined,
64+
count: 1,
65+
height: undefined,
66+
inline: false,
67+
width: '100%',
68+
};
69+
70+
export default LoadingSkeleton;

‎src/LoadingSkeleton/LoadingSkeleton.mdx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
2+
import LoadingSkeleton from './LoadingSkeleton';
3+
4+
# LoadingSkeleton
5+
6+
##
7+
8+
<h4>
9+
A LoadingSkeleton is used to provide a low fidelity representation of content before it
10+
renders on the page. It improves load time perception for users.
11+
</h4>
12+
13+
<Canvas>
14+
<Story id="components-loadingskeleton--default" />
15+
</Canvas>
16+
17+
### When to use
18+
- For representing all content on initial page load
19+
- For representing large or multiple content elements on a page (avoiding multiple LoadingOverlays at one time)
20+
- For components that are data-intesive and may take a few seconds to fully load
21+
- Offering a simplified preview of loading content
22+
23+
### When not to use
24+
- Do not use a LoadingSkeleton and LoadingOverlay together. Use the one that best fits the context.
25+
26+
### LoadingSkeleton vs. LoadingOverlay?
27+
28+
| Scenario | LoadingSkeleton | LoadingOverlay |
29+
|------------------------------------------------------------------------|---------------------------------------------------|-----------------------------------------------------------------------|
30+
| Initial page load | ✅ Yes | No |
31+
| Dynamic data that requires loading | ✅ Yes | No |
32+
| Static data that never changes (e.g. body text, copy, titles) | ✅ Yes (helpful with large amount of content) | No |
33+
| User caused action (e.g. button press that causes UI change on screen) | No | ✅ Yes (this indicates application processing) |
34+
| Form elements | ✅ Yes (to represent different form elements) | No |
35+
| Form submission | No | ✅ Yes (typically full-screen, possibly with page refresh) |
36+
| Page saving | No | ✅ Yes (typically full-screen) |
37+
| Card | ✅ Yes (for Card content, not the container itself| No (unless there is a user action that changes that data in the card) |
38+
| Table | ✅ Yes (for initial page load) | No |
39+
| Avatar or ProfileCell | ✅ Yes | No |
40+
| Alert or Toast | No | No
41+
42+
## Props
43+
44+
<ArgsTable of={LoadingSkeleton} />
45+
46+
47+
## Stories
48+
49+
### Default
50+
51+
<Canvas>
52+
<Story id="components-loadingskeleton--default" />
53+
</Canvas>
54+
55+
### Multi-line
56+
57+
<Canvas>
58+
<Story id="components-loadingskeleton--multi-line" />
59+
</Canvas>
60+
61+
### Height and Width
62+
63+
<Canvas>
64+
<Story id="components-loadingskeleton--height-and-width" />
65+
</Canvas>
66+
67+
### Circle
68+
69+
<Canvas>
70+
<Story id="components-loadingskeleton--circle" />
71+
</Canvas>
72+
73+
### Card Content
74+
75+
<Canvas>
76+
<Story id="components-loadingskeleton--card-content" />
77+
</Canvas>

‎src/LoadingSkeleton/LoadingSkeleton.stories.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
3+
import {
4+
withKnobs, boolean, number, text,
5+
} from '@storybook/addon-knobs';
6+
7+
import Card from 'src/Card';
8+
9+
import LoadingSkeleton from './LoadingSkeleton';
10+
import mdx from './LoadingSkeleton.mdx';
11+
12+
export default {
13+
title: 'Components/LoadingSkeleton',
14+
component: LoadingSkeleton,
15+
decorators: [withKnobs],
16+
parameters: {
17+
docs: {
18+
page: mdx,
19+
},
20+
},
21+
};
22+
23+
export const Default = () => (
24+
<LoadingSkeleton />
25+
);
26+
27+
export const MultiLine = () => (
28+
<LoadingSkeleton count={number('count', 3)} />
29+
);
30+
31+
export const HeightAndWidth = () => (
32+
<LoadingSkeleton height={text('height', '44px')} width={text('width', '200px')} />
33+
);
34+
35+
export const Circle = () => (
36+
<LoadingSkeleton circle={boolean('circle', true)} height={44} width={44} />
37+
);
38+
39+
export const CardContent = () => (
40+
<Card size="md" subTitle={`Research is better together 🕵️🕵. Invite as many team members as you'd like so they can view and copy any project.`} title="Invite Team members">
41+
<LoadingSkeleton count={3} />
42+
<br />
43+
<LoadingSkeleton count={2.5} />
44+
</Card>
45+
);

‎src/LoadingSkeleton/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import LoadingSkeleton from './LoadingSkeleton';
2+
3+
export {
4+
LoadingSkeleton,
5+
};

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import IconCell from 'src/IconCell';
3131
import Input from 'src/Input';
3232
import InputLabel from 'src/InputLabel';
3333
import InputLegend from 'src/InputLegend';
34+
import { LoadingSkeleton } from 'src/LoadingSkeleton';
3435
import LoadingOverlay from 'src/LoadingOverlay';
3536
import {
3637
Modal,
@@ -121,6 +122,7 @@ export {
121122
InputLabel,
122123
InputLegend,
123124
LoadingOverlay,
125+
LoadingSkeleton,
124126
MessageTypes,
125127
Modal,
126128
MODAL_SIZES,

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11186,6 +11186,11 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
1118611186
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
1118711187
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
1118811188

11189+
react-loading-skeleton@^3.1.0:
11190+
version "3.1.0"
11191+
resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz#ce22942f1af77bfd60854417075792367f54f41e"
11192+
integrity sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==
11193+
1118911194
react-modal@^3.12.1:
1119011195
version "3.12.1"
1119111196
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.12.1.tgz#38c33f70d81c33d02ff1ed115530443a3dc2afd3"

0 commit comments

Comments
 (0)