Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 177x 1x 1x 177x 1x 177x 177x | import React from 'react';
import { cxBackgroundGray } from './LoadingSkeletonsSvgUtil';
import LoadingSkeleton, {
ILoadingSkeletonProps,
IStandardSkeleton,
} from './LoadingSkeleton';
export const HeaderSkeleton = (
props: IStandardSkeleton
): React.ReactElement => {
const { width = 580, height = 70, className } = props;
return (
<div data-test-id='loadingSkeleton-HeaderSkeleton'>
<svg
data-test-id='loadingSkeleton-HeaderSkeleton-svg'
width={width}
height={height}
xmlns='http://www.w3.org/2000/svg'
>
<path
className={cxBackgroundGray('&', className)}
d='M266 58v10H0V58h266zm293-36v24H0V22h559zM166 0v10H0V0h166zm221 0v10H181V0h206z'
fillRule='evenodd'
/>
</svg>
</div>
);
};
export const HeaderLoadingSkeleton = (
props: ILoadingSkeletonProps
): React.ReactElement => {
return (
<LoadingSkeleton
data-test-id='loadingSkeleton-HeaderLoadingSkeleton'
Skeleton={HeaderSkeleton}
{...props}
/>
);
};
HeaderLoadingSkeleton.displayName = 'HeaderLoadingSkeleton';
HeaderLoadingSkeleton.peek = {
description: `
A loading indicator wrapper with optional overlay.
`,
notes: {
overview: `
A visual indication that a section or component of the interface is loading. Designed to indicate loading data
`,
intendedUse: `
- Use in places where data takes time to load. HeaderLoadingSkeleton lets users know that the information they expect to see will appear shortly.
`,
technicalRecommendations: `
If a page is displaying a lot of data coming from multiple sources, try as best as possible to load the
individual parts of the UI, so as not to disrupt the user and block them from interacting with the entire page until all data is loaded.
`,
},
categories: ['Loading Indicator'],
};
export default HeaderLoadingSkeleton;
|