Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bar & Histogram & Formula & ComparativeFormula Widgets: Add a skeleton for loading state #674

Merged
merged 17 commits into from
May 24, 2023
Merged

Bar & Histogram & Formula & ComparativeFormula Widgets: Add a skeleton for loading state #674

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
893ad66
first approach to BarWidgetUI skeleton
vmilan May 18, 2023
50a95a3
first approach to BarWidgetUI skeleton
vmilan May 18, 2023
a15c938
fine tunning of Skeleton
vmilan May 19, 2023
6545811
histogram widget loading
vmilan May 19, 2023
6fe5145
changelog and cleanup
vmilan May 19, 2023
bbd16fc
merge with master
vmilan May 19, 2023
e132075
merge with master
vmilan May 22, 2023
63da47d
cleanup
vmilan May 22, 2023
f787ef7
FormulaWidgetUI skeleton
vmilan May 22, 2023
d282cdd
changelog update
vmilan May 22, 2023
75a06ff
changelog update
vmilan May 22, 2023
9c76bad
add types
vmilan May 22, 2023
3f55481
adapt storybook to latest changes in design
vmilan May 22, 2023
75ecf54
adding comparative formula
vmilan May 22, 2023
e9a8f07
minor fixes
vmilan May 23, 2023
4456056
add missing const
vmilan May 23, 2023
674ae05
change storybook intro text
vmilan May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
minor fixes
  • Loading branch information
@vmilan
vmilan committed May 23, 2023
commit e9a8f07db555977e2dc1e62a7a2e5aff5cf7dfd5
1 change: 1 addition & 0 deletions packages/react-ui/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,7 @@ export type ComparativeFormulaWidgetUI = {
animated?: boolean;
animationOptions?: AnimationOptions;
formatter?: (n: number) => React.ReactNode;
isLoading?: boolean;
};

export enum ORDER_TYPES {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-ui/src/widgets/BarWidgetUI/BarSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Skeleton } from '@mui/material';
import { SkeletonBarsGrid, SkeletonBarItem } from '../SkeletonWidgets';
import { SkeletonBarsGrid, SkeletonBarItem, SKELETON_HEIGHT } from '../SkeletonWidgets';

const BarSkeleton = ({ height }) => {
return (
Expand All @@ -8,7 +8,7 @@ const BarSkeleton = ({ height }) => {
<Skeleton width={48} height={8} />
</Box>

<SkeletonBarsGrid style={{ height: height }}>
<SkeletonBarsGrid style={{ height: height || SKELETON_HEIGHT }}>
<SkeletonBarItem variant='rectangular' height='20%' />
<SkeletonBarItem variant='rectangular' height='40%' />
<SkeletonBarItem variant='rectangular' height='60%' />
Expand Down
12 changes: 8 additions & 4 deletions ...ogramWidgetUI/HistogramWidgetLoadingUI.js → ...ts/HistogramWidgetUI/HistogramSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import { Box, Skeleton } from '@mui/material';
import { SkeletonGraphGrid, SkeletonThinBarItem } from '../SkeletonWidgets';
import {
SKELETON_HEIGHT,
SkeletonGraphGrid,
SkeletonThinBarItem
} from '../SkeletonWidgets';

const HistogramWidgetLoadingUI = ({ height }) => {
const HistogramSkeleton = ({ height }) => {
return (
<>
<Box mb={2}>
<Skeleton width={48} height={8} />
</Box>

<SkeletonGraphGrid style={{ height: height }}>
<SkeletonGraphGrid style={{ height: height || SKELETON_HEIGHT }}>
<SkeletonThinBarItem variant='rectangular' height='20%' />
<SkeletonThinBarItem variant='rectangular' height='40%' />
<SkeletonThinBarItem variant='rectangular' height='60%' />
Expand All @@ -26,4 +30,4 @@ const HistogramWidgetLoadingUI = ({ height }) => {
);
};

export default HistogramWidgetLoadingUI;
export default HistogramSkeleton;
4 changes: 2 additions & 2 deletions packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { processFormatterRes } from '../utils/formatterUtils';
import detectTouchscreen from '../utils/detectTouchScreen';
import useHistogramInteractivity from './useHistogramInteractivity';
import Typography from '../../components/atoms/Typography';
import HistogramWidgetLoadingUI from './HistogramWidgetLoadingUI';
import HistogramSkeleton from './HistogramSkeleton';

const IS_TOUCH_SCREEN = detectTouchscreen();

Expand Down Expand Up @@ -264,7 +264,7 @@ function HistogramWidgetUI({
0
);

if (isLoading) return <HistogramWidgetLoadingUI height={height} />;
if (isLoading) return <HistogramSkeleton height={height} />;

return (
<div>
Expand Down