Skip to content

Commit 59c5c8e

Browse files
cannarockscannarocks
authored
Merge pull request #324 from AppQuality/update-card-loading-animation
refactor(widgets): normalize loader skeleton across widgets
2 parents 0844356 + 173df8f commit 59c5c8e

File tree

9 files changed

+247
-182
lines changed

9 files changed

+247
-182
lines changed

‎src/pages/Campaign/widgets/BugDistributionCard/index.tsx‎

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
Anchor,
33
HalfPieChart,
4-
Skeleton,
54
XL,
65
Span,
76
SM,
@@ -14,6 +13,7 @@ import styled from 'styled-components';
1413
import { useBugs } from './useBugs';
1514
import { BasicWidget } from '../widgetCards/BasicWidget';
1615
import { CapitalizeFirstLetter } from '../widgetCards/common/CapitalizeFirstLetter';
16+
import { WidgetLoader } from '../widgetLoader';
1717

1818
function translateSeverity(severity: Severities, t: TFunction) {
1919
switch (severity) {
@@ -39,13 +39,12 @@ const BugDistributionCard = ({ campaignId }: { campaignId: number }) => {
3939
const height = '140px';
4040
const { data, isLoading } = useBugs(campaignId);
4141

42-
if (
42+
if (!('bySeverity' in data)) return null;
43+
44+
const showLoader =
4345
isLoading ||
4446
!('bySeverity' in data) ||
45-
Object.keys(data.bySeverity).length === 0
46-
) {
47-
return <Skeleton />;
48-
}
47+
Object.keys(data.bySeverity).length === 0;
4948

5049
const colorScheme = Object.keys(data.bySeverity).map(
5150
(key) => theme.colors.bySeverity[key as Severities]
@@ -66,49 +65,56 @@ const BugDistributionCard = ({ campaignId }: { campaignId: number }) => {
6665
</Trans>
6766
</CapitalizeFirstLetter>
6867
</BasicWidget.Header>
69-
<HalfPieChart
70-
width="50%"
71-
height={height}
72-
colors={colorScheme}
73-
data={Object.entries(data.bySeverity).map(([key, value]) => ({
74-
id: key,
75-
label: key,
76-
value,
77-
}))}
78-
/>
79-
<BasicWidget.Description
80-
header={t('__CAMPAIGN_WIDGET_BUGDISTRIBUTION_DESCRIPTION_HEADER')}
81-
content={
82-
<span
83-
style={{
84-
color: theme.colors.bySeverity[maxSeverity as Severities],
85-
}}
86-
>
87-
{`${data.bySeverity[maxSeverity as Severities] || 0} `}
88-
<XL tag="span" isBold>
89-
<Trans
90-
i18nKey="__CAMPAIGN_WIDGET_BUGDISTRIBUTION_COUNT_LABEL"
91-
count={data.bySeverity[maxSeverity as Severities] || 0}
68+
{showLoader ? (
69+
<WidgetLoader />
70+
) : (
71+
<>
72+
<HalfPieChart
73+
width="50%"
74+
height={height}
75+
colors={colorScheme}
76+
data={Object.entries(data.bySeverity).map(([key, value]) => ({
77+
id: key,
78+
label: key,
79+
value,
80+
}))}
81+
/>
82+
<BasicWidget.Description
83+
header={t('__CAMPAIGN_WIDGET_BUGDISTRIBUTION_DESCRIPTION_HEADER')}
84+
content={
85+
<span
86+
style={{
87+
color: theme.colors.bySeverity[maxSeverity as Severities],
88+
}}
9289
>
93-
bugs {{ severity: translateSeverity(maxSeverity, t) }}
94-
</Trans>
95-
</XL>
96-
</span>
97-
}
98-
footer={
99-
<Trans
100-
i18nKey="__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL"
101-
defaults="out of <bold>{{total}}</bold> unique"
102-
count={data.total || 0}
103-
components={{
104-
bold: <Value isBold />,
105-
}}
106-
values={{
107-
total: data.total || 0,
108-
}}
90+
{`${data.bySeverity[maxSeverity as Severities] || 0} `}
91+
<XL tag="span" isBold>
92+
<Trans
93+
i18nKey="__CAMPAIGN_WIDGET_BUGDISTRIBUTION_COUNT_LABEL"
94+
count={data.bySeverity[maxSeverity as Severities] || 0}
95+
>
96+
bugs {{ severity: translateSeverity(maxSeverity, t) }}
97+
</Trans>
98+
</XL>
99+
</span>
100+
}
101+
footer={
102+
<Trans
103+
i18nKey="__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL"
104+
defaults="out of <bold>{{total}}</bold> unique"
105+
count={data.total || 0}
106+
components={{
107+
bold: <Value isBold />,
108+
}}
109+
values={{
110+
total: data.total || 0,
111+
}}
112+
/>
113+
}
109114
/>
110-
}
111-
/>
115+
</>
116+
)}
117+
112118
<BasicWidget.Footer>
113119
<Anchor
114120
isExternal

‎src/pages/Campaign/widgets/IncomingBugs/UnreadBugs/index.tsx‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
} from '@appquality/unguess-design-system';
77
import styled from 'styled-components';
88
import { useTranslation } from 'react-i18next';
9+
import { theme as globalTheme } from 'src/app/theme';
910
import { useUnreadBugs } from './useUnreadBugs';
1011
import { EmptyState } from './EmptyState';
1112
import { BugCard } from '../../BugCard';
12-
import { theme as ugTheme } from '../../../../../app/theme';
1313
import { UnreadBugsWrapper } from './UnreadBugsWrapper';
1414

1515
const StyledAccordionLabel = styled(Accordion.Label)`
@@ -40,11 +40,19 @@ const UnreadBugs = ({ campaignId }: { campaignId: number }) => {
4040

4141
if (isLoading)
4242
return (
43-
<>
44-
<StyledSkeleton height="110px" style={{ borderRadius: 0 }} />
45-
<StyledSkeleton height="110px" style={{ borderRadius: 0 }} />
46-
<StyledSkeleton height="110px" style={{ borderRadius: 0 }} />
47-
</>
43+
<div style={{ marginTop: globalTheme.space.sm }}>
44+
<StyledSkeleton width="80%" height="28px" />
45+
<StyledSkeleton width="60%" height="22px" />
46+
<StyledSkeleton
47+
width="60%"
48+
height="22px"
49+
style={{ marginBottom: globalTheme.space.md }}
50+
/>
51+
52+
<StyledSkeleton width="80%" height="28px" />
53+
<StyledSkeleton width="60%" height="22px" />
54+
<StyledSkeleton width="60%" height="22px" />
55+
</div>
4856
);
4957

5058
if (isError) return <EmptyState />;
@@ -60,13 +68,16 @@ const UnreadBugs = ({ campaignId }: { campaignId: number }) => {
6068
<Accordion.Header>
6169
<StyledAccordionLabel>
6270
<UseCaseLabel>
63-
<SM isBold style={{ paddingRight: ugTheme.space.xs }}>
71+
<SM isBold style={{ paddingRight: globalTheme.space.xs }}>
6472
{usecase.title}
6573
</SM>
66-
<SM style={{ color: ugTheme.palette.grey[600] }}>
74+
<SM style={{ color: globalTheme.palette.grey[600] }}>
6775
<Span>({t('__CAMPAIGN_WIDGET_INCOMING_BUGS_UNREAD')}</Span>
6876
{': '}
69-
<Span isBold style={{ color: ugTheme.palette.blue[600] }}>
77+
<Span
78+
isBold
79+
style={{ color: globalTheme.palette.blue[600] }}
80+
>
7081
{usecase.unreadCount}
7182
</Span>
7283
/{usecase.totalCount})

‎src/pages/Campaign/widgets/Progress/index.tsx‎

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
BulletChart,
44
Span,
55
Tag,
6-
Skeleton,
76
SM,
87
} from '@appquality/unguess-design-system';
98
import { theme } from 'src/app/theme';
@@ -13,6 +12,7 @@ import { Trans, useTranslation } from 'react-i18next';
1312
import { Campaign } from 'src/features/api';
1413
import { BasicWidget } from '../widgetCards/BasicWidget';
1514
import { useWidgetData } from './useWidgetData';
15+
import { WidgetLoader } from '../widgetLoader';
1616

1717
const ChartContainer = styled.div`
1818
display: flex;
@@ -28,10 +28,6 @@ export const Progress: FC<{ campaign: Campaign }> = ({ campaign }) => {
2828
const { t } = useTranslation();
2929
const { widgetData, isLoading } = useWidgetData(campaign.id, t);
3030

31-
if (isLoading || !widgetData) {
32-
return <Skeleton />;
33-
}
34-
3531
return (
3632
<BasicWidget>
3733
<BasicWidget.Header
@@ -42,71 +38,77 @@ export const Progress: FC<{ campaign: Campaign }> = ({ campaign }) => {
4238
>
4339
{t('__CAMPAIGN_PAGE_WIDGET_PROGRESS_CARD_TITLE', 'Stato avanzamento')}
4440
</BasicWidget.Header>
45-
<ChartContainer style={{ height }}>
46-
<div style={{ width: '100%' }}>
47-
<SM style={{ marginBottom: theme.space.xs }}>
48-
{t(
49-
'__CAMPAIGN_PAGE_WIDGET_PROGRESS_USECASE_BULLET_TITLE',
50-
'Use Case completion'
51-
)}
52-
</SM>
53-
<BulletChart
54-
ranges={[25, 50, 75, 100]}
55-
values={[widgetData.raw.usecase_completion]}
56-
height="15px"
57-
width="60%"
58-
/>
59-
<SM
60-
style={{
61-
marginBottom: theme.space.xs,
62-
marginTop: theme.space.md,
63-
}}
64-
>
65-
{t(
66-
'__CAMPAIGN_PAGE_WIDGET_PROGRESS_TIME_BULLET_TITLE',
67-
'Time passed'
68-
)}
69-
</SM>
70-
<BulletChart
71-
ranges={[25, 50, 75, 100]}
72-
values={[widgetData.elapsedTimePercentage]}
73-
height="15px"
74-
width="60%"
41+
{isLoading || !widgetData ? (
42+
<WidgetLoader />
43+
) : (
44+
<>
45+
<ChartContainer style={{ height }}>
46+
<div style={{ width: '100%' }}>
47+
<SM style={{ marginBottom: theme.space.xs }}>
48+
{t(
49+
'__CAMPAIGN_PAGE_WIDGET_PROGRESS_USECASE_BULLET_TITLE',
50+
'Use Case completion'
51+
)}
52+
</SM>
53+
<BulletChart
54+
ranges={[25, 50, 75, 100]}
55+
values={[widgetData.raw.usecase_completion]}
56+
height="15px"
57+
width="60%"
58+
/>
59+
<SM
60+
style={{
61+
marginBottom: theme.space.xs,
62+
marginTop: theme.space.md,
63+
}}
64+
>
65+
{t(
66+
'__CAMPAIGN_PAGE_WIDGET_PROGRESS_TIME_BULLET_TITLE',
67+
'Time passed'
68+
)}
69+
</SM>
70+
<BulletChart
71+
ranges={[25, 50, 75, 100]}
72+
values={[widgetData.elapsedTimePercentage]}
73+
height="15px"
74+
width="60%"
75+
/>
76+
</div>
77+
</ChartContainer>
78+
<BasicWidget.Description
79+
header={widgetData.durationLabel}
80+
content={
81+
<div style={{ color: theme.palette.blue['600'] }}>
82+
{widgetData.duration.value}{' '}
83+
<XL tag="span" isBold>
84+
{widgetData.duration.unit}
85+
</XL>
86+
</div>
87+
}
88+
footer={
89+
widgetData.expectedDuration ? (
90+
<Trans
91+
i18nKey="__CAMPAIGN_PAGE_WIDGET_PROGRESS_DESCRIPTION_FOOTER"
92+
components={{ bold: <Value isBold /> }}
93+
defaults="over <bold>{{ expectedDuration }}</bold> expected"
94+
values={{
95+
expectedDuration: `${widgetData.expectedDuration.value} ${widgetData.expectedDuration.unit}`,
96+
}}
97+
/>
98+
) : null
99+
}
75100
/>
76-
</div>
77-
</ChartContainer>
78-
<BasicWidget.Description
79-
header={widgetData.durationLabel}
80-
content={
81-
<div style={{ color: theme.palette.blue['600'] }}>
82-
{widgetData.duration.value}{' '}
83-
<XL tag="span" isBold>
84-
{widgetData.duration.unit}
85-
</XL>
86-
</div>
87-
}
88-
footer={
89-
widgetData.expectedDuration ? (
90-
<Trans
91-
i18nKey="__CAMPAIGN_PAGE_WIDGET_PROGRESS_DESCRIPTION_FOOTER"
92-
components={{ bold: <Value isBold /> }}
93-
defaults="over <bold>{{ expectedDuration }}</bold> expected"
94-
values={{
95-
expectedDuration: `${widgetData.expectedDuration.value} ${widgetData.expectedDuration.unit}`,
96-
}}
97-
/>
98-
) : null
99-
}
100-
/>
101-
<BasicWidget.Footer>
102-
<Tag isPill>
103-
{t('__CAMPAIGN_PAGE_WIDGET_PROGRESS_FOOTER', {
104-
defaultValue: 'Test duration: {{startDate}} to {{endDate}}',
105-
startDate: widgetData.startDate,
106-
endDate: widgetData.endDate,
107-
})}
108-
</Tag>
109-
</BasicWidget.Footer>
101+
<BasicWidget.Footer>
102+
<Tag isPill>
103+
{t('__CAMPAIGN_PAGE_WIDGET_PROGRESS_FOOTER', {
104+
defaultValue: 'Test duration: {{startDate}} to {{endDate}}',
105+
startDate: widgetData.startDate,
106+
endDate: widgetData.endDate,
107+
})}
108+
</Tag>
109+
</BasicWidget.Footer>
110+
</>
111+
)}
110112
</BasicWidget>
111113
);
112114
};

‎src/pages/Campaign/widgets/TotalBugsByOsAndDevices/ChartTotalBugsByDevice/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled from 'styled-components';
44
import { useState, useEffect } from 'react';
55
import { useBugsByDevices } from './useBugsByDevices';
66
import { getChildrenValue } from './getChildrenValue';
7+
import { WidgetLoader } from '../../widgetLoader';
78

89
const StyledSM = styled(SM)`
910
color: ${({ theme }) => theme.colors.primaryHue};
@@ -22,13 +23,15 @@ export const ChartTotalBugsByDevice = ({
2223
campaignId: number;
2324
}) => {
2425
const { t } = useTranslation();
25-
const { chartData } = useBugsByDevices(campaignId);
26+
const { chartData, isLoading } = useBugsByDevices(campaignId);
2627
const [totalBugs, setTotalBugs] = useState(0);
2728

2829
useEffect(() => {
2930
setTotalBugs(getChildrenValue(chartData));
3031
}, [chartData]);
3132

33+
if (isLoading) return <WidgetLoader size="md" align="center" />;
34+
3235
return chartData.children && chartData.children.length > 0 ? (
3336
<SunburstChart
3437
data={chartData}
@@ -45,8 +48,7 @@ export const ChartTotalBugsByDevice = ({
4548
{!data?.isLast ? (
4649
<StyledSM isBold>
4750
{t(
48-
'__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_CHART_TOOLTIP_DRILLDOWN',
49-
`👉 Drill down to:`
51+
'__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_CHART_TOOLTIP_DRILLDOWN'
5052
)}
5153
</StyledSM>
5254
) : null}

0 commit comments

Comments
 (0)