Skip to content

Commit 24d6b8b

Browse files
JonasBaJonasBa
authored
loadingindicator: cleanup api (#88738)
Remove unused options and remove hideMessage option in favor of checking the children prop. Also removes most usages where width/height is set in favor of the size API.
1 parent b1886f1 commit 24d6b8b

File tree

29 files changed

+56
-92
lines changed

29 files changed

+56
-92
lines changed

‎static/app/components/assigneeBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export function AssigneeBadge({
7373

7474
const loadingIcon = (
7575
<Fragment>
76-
<StyledLoadingIndicator mini hideMessage relative size={AVATAR_SIZE} />
76+
<StyledLoadingIndicator mini relative size={AVATAR_SIZE} />
7777
{showLabel && 'Loading...'}
7878
<Chevron light color="subText" direction={chevronDirection} size="small" />
7979
</Fragment>

‎static/app/components/comboBox/index.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -486,8 +486,6 @@ const MenuTitle = styled('span')`
486486
const StyledLoadingIndicator = styled(LoadingIndicator)`
487487
&& {
488488
margin: 0 ${space(0.5)} 0 ${space(1)};
489-
height: 12px;
490-
width: 12px;
491489
}
492490
`;
493491

‎static/app/components/core/compactSelect/control.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -642,8 +642,6 @@ const MenuTitle = styled('span')`
642642
const StyledLoadingIndicator = styled(LoadingIndicator)`
643643
&& {
644644
margin: 0 ${space(0.5)} 0 ${space(1)};
645-
height: 12px;
646-
width: 12px;
647645
}
648646
`;
649647

‎static/app/components/events/autofix/autofixChanges.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -228,9 +228,7 @@ function CreatePRsButton({
228228
<Button
229229
priority="primary"
230230
onClick={createPRs}
231-
icon={
232-
hasClickedCreatePr && <ProcessingStatusIndicator size={14} mini hideMessage />
233-
}
231+
icon={hasClickedCreatePr && <StyledLoadingIndicator size={14} mini />}
234232
size="sm"
235233
busy={hasClickedCreatePr}
236234
disabled={isBusy}
@@ -302,9 +300,7 @@ function CreateBranchButton({
302300
return (
303301
<Button
304302
onClick={pushToBranch}
305-
icon={
306-
hasClickedPushToBranch && <ProcessingStatusIndicator size={14} mini hideMessage />
307-
}
303+
icon={hasClickedPushToBranch && <StyledLoadingIndicator size={14} mini />}
308304
size="sm"
309305
busy={hasClickedPushToBranch}
310306
disabled={isBusy}
@@ -653,10 +649,8 @@ const HeaderIconWrapper = styled('div')`
653649
justify-content: center;
654650
`;
655651

656-
const ProcessingStatusIndicator = styled(LoadingIndicator)`
652+
const StyledLoadingIndicator = styled(LoadingIndicator)`
657653
&& {
658654
margin: 0;
659-
height: 14px;
660-
width: 14px;
661655
}
662656
`;

‎static/app/components/events/eventTags/eventTagsTree.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ function TagTreeColumns({
142142
});
143143
const assembledColumns = useMemo(() => {
144144
if (isPending) {
145-
return <TreeLoadingIndicator hideMessage />;
145+
return <TreeLoadingIndicator />;
146146
}
147147

148148
if (!project) {

‎static/app/components/events/highlights/highlightsDataSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ function HighlightsData({
228228
<HighlightContainer columnCount={columnCount} ref={containerRef}>
229229
{isPending ? (
230230
<EmptyHighlights>
231-
<HighlightsLoadingIndicator hideMessage size={50} />
231+
<HighlightsLoadingIndicator size={50} />
232232
</EmptyHighlights>
233233
) : hasDisabledHighlights ? (
234234
<EmptyHighlights>

‎static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
126126
// 12px is consistent with theme.iconSizes['xs'] but theme returns a string.
127127
return (
128128
<StyledDiscoverButton href="#" size="xs" disabled>
129-
<StyledLoadingIndicator size={12} />
129+
<StyledLoadingIndicator size={16} />
130130
</StyledDiscoverButton>
131131
);
132132
}
@@ -662,7 +662,6 @@ const ValueTd = styled('td')`
662662
const StyledLoadingIndicator = styled(LoadingIndicator)`
663663
display: flex;
664664
align-items: center;
665-
height: ${space(2)};
666665
margin: 0;
667666
`;
668667

‎static/app/components/events/interfaces/spans/spanDetail.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ function SpanDetail(props: Props) {
133133
// 12px is consistent with theme.iconSizes['xs'] but theme returns a string.
134134
return (
135135
<StyledDiscoverButton href="#" size="xs" disabled>
136-
<StyledLoadingIndicator size={12} />
136+
<StyledLoadingIndicator size={16} />
137137
</StyledDiscoverButton>
138138
);
139139
}
@@ -641,7 +641,6 @@ const ValueTd = styled('td')`
641641
const StyledLoadingIndicator = styled(LoadingIndicator)`
642642
display: flex;
643643
align-items: center;
644-
height: ${space(2)};
645644
margin: 0;
646645
`;
647646

‎static/app/components/group/assignedTo.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,5 @@ const StyledSidebarTitle = styled(SidebarSection.Title)`
343343
`;
344344

345345
const StyledLoadingIndicator = styled(LoadingIndicator)`
346-
width: 24px;
347-
height: 24px;
348346
margin: 0 !important;
349347
`;

‎static/app/components/groupPreviewTooltip/evidencePreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function SpanEvidencePreviewBody({
4747
if (isPending) {
4848
return (
4949
<EmptyWrapper>
50-
<LoadingIndicator hideMessage size={32} />
50+
<LoadingIndicator size={32} />
5151
</EmptyWrapper>
5252
);
5353
}

‎static/app/components/groupPreviewTooltip/spanEvidencePreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function SpanEvidencePreviewBody({
5151
if (isPending) {
5252
return (
5353
<EmptyWrapper>
54-
<LoadingIndicator hideMessage size={32} />
54+
<LoadingIndicator size={32} />
5555
</EmptyWrapper>
5656
);
5757
}

‎static/app/components/groupPreviewTooltip/stackTracePreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ function StackTracePreviewBody({
136136
if (isPending) {
137137
return (
138138
<NoStackTraceWrapper>
139-
<LoadingIndicator hideMessage size={32} />
139+
<LoadingIndicator size={32} />
140140
</NoStackTraceWrapper>
141141
);
142142
}

‎static/app/components/loadingIndicator.stories.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1+
import styled from '@emotion/styled';
2+
13
import LoadingIndicator from 'sentry/components/loadingIndicator';
24
import storyBook from 'sentry/stories/storyBook';
35

46
export default storyBook('LoadingIndicator', story => {
57
story('Default', () => <LoadingIndicator />);
68

79
story('Mini', () => <LoadingIndicator mini />);
10+
story('Sizes', () => (
11+
<div>
12+
<LoadingIndicator size={24} />
13+
<StyledLoadingIndicator size={24} />
14+
</div>
15+
));
816

917
story('With Message', () => <LoadingIndicator>Loading...</LoadingIndicator>);
1018
});
19+
20+
const StyledLoadingIndicator = styled(LoadingIndicator)`
21+
width: 24px;
22+
height: 24px;
23+
`;

‎static/app/components/loadingIndicator.tsx

Lines changed: 19 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,34 @@
11
import {withProfiler} from '@sentry/react';
22
import classNames from 'classnames';
33

4-
type Props = {
5-
children?: React.ReactNode;
4+
interface LoadingIndicatorProps {
5+
children?: NonNullable<React.ReactNode>;
66
className?: string;
7-
dark?: boolean;
87
['data-test-id']?: string;
9-
hideMessage?: boolean;
10-
hideSpinner?: boolean;
118
mini?: boolean;
129
overlay?: boolean;
1310
relative?: boolean;
1411
size?: number;
1512
style?: React.CSSProperties;
16-
};
17-
18-
function LoadingIndicator(props: Props) {
19-
const {
20-
hideMessage,
21-
mini,
22-
overlay,
23-
dark,
24-
children,
25-
className,
26-
style,
27-
relative,
28-
size,
29-
hideSpinner,
30-
['data-test-id']: dataTestId,
31-
} = props;
32-
const cx = classNames(className, {
33-
overlay,
34-
dark,
35-
loading: true,
36-
mini,
37-
});
38-
39-
const loadingCx = classNames({
40-
relative,
41-
'loading-indicator': true,
42-
});
43-
44-
let loadingStyle: React.CSSProperties = {};
45-
if (size) {
46-
loadingStyle = {
47-
width: size,
48-
height: size,
49-
};
50-
}
13+
}
5114

15+
function LoadingIndicator(props: LoadingIndicatorProps) {
5216
return (
53-
<div className={cx} style={style} data-test-id={dataTestId ?? 'loading-indicator'}>
54-
{!hideSpinner && <div className={loadingCx} style={loadingStyle} />}
55-
{!hideMessage && <div className="loading-message">{children}</div>}
17+
<div
18+
className={classNames('loading', props.className, {
19+
overlay: props.overlay,
20+
mini: props.mini,
21+
})}
22+
style={props.style}
23+
data-test-id={props['data-test-id'] ?? 'loading-indicator'}
24+
>
25+
<div
26+
className={classNames('loading-indicator', {
27+
relative: props.relative,
28+
})}
29+
style={props.size ? {width: props.size, height: props.size} : undefined}
30+
/>
31+
{props.children && <div className="loading-message">{props.children}</div>}
5632
</div>
5733
);
5834
}

‎static/app/components/modals/inviteMembersModal/emailValue.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function EmailValue<Option extends OptionTypeBase>({
2929
<Tooltip disabled={!error} title={error}>
3030
<EmailLabel>
3131
{children}
32-
{!status.sent && !status.error && <SendingIndicator hideMessage size={14} />}
32+
{!status.sent && !status.error && <SendingIndicator size={14} />}
3333
{status.error && <IconWarning legacySize="10px" />}
3434
</EmailLabel>
3535
</Tooltip>

‎static/app/components/modals/inviteMembersModal/inviteStatusMessage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function InviteStatusMessage({
7575
if (sendingInvites) {
7676
return (
7777
<StatusMessage>
78-
<LoadingIndicator mini relative hideMessage size={16} />
78+
<LoadingIndicator mini relative size={16} />
7979
{willInvite
8080
? t('Sending organization invitations\u2026')
8181
: t('Sending invite requests\u2026')}

‎static/app/components/modals/inviteMissingMembersModal/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export function InviteMissingMembersModal({
110110
if (sendingInvites) {
111111
return (
112112
<StatusMessage>
113-
<LoadingIndicator mini relative hideMessage size={16} />
113+
<LoadingIndicator mini relative size={16} />
114114
{t('Sending organization invitations\u2026')}
115115
</StatusMessage>
116116
);

‎static/app/components/profiling/flamegraph/flamegraphContextMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ export function FlamegraphContextMenu(props: FlamegraphContextMenuProps) {
198198
})}
199199
icon={
200200
sourceCodeLink.isPending ? (
201-
<StyledLoadingIndicator size={10} hideMessage />
201+
<StyledLoadingIndicator size={10} />
202202
) : (
203203
<IconGithub size="xs" />
204204
)
@@ -448,7 +448,7 @@ export function ContinuousFlamegraphContextMenu(props: FlamegraphContextMenuProp
448448
})}
449449
icon={
450450
sourceCodeLink.isPending ? (
451-
<StyledLoadingIndicator size={10} hideMessage />
451+
<StyledLoadingIndicator size={10} />
452452
) : (
453453
<IconGithub size="xs" />
454454
)

‎static/app/components/search/list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function List({
7070
<DropdownBox className={dropdownClassName}>
7171
{isLoading ? (
7272
<LoadingWrapper>
73-
<LoadingIndicator mini hideMessage relative />
73+
<LoadingIndicator mini relative />
7474
</LoadingWrapper>
7575
) : hasResults ? (
7676
resultList.map((result, index) => {

‎static/app/views/alerts/list/rules/row.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ function RuleListRow({
290290
<ActorAvatar actor={ownerActor} size={24} />
291291
) : (
292292
<AssigneeWrapper>
293-
{!projectsLoaded && <StyledLoadingIndicator mini />}
293+
{!projectsLoaded && <StyledLoadingIndicator mini size={16} />}
294294
{projectsLoaded && (
295295
<DropdownAutoComplete
296296
data-test-id="alert-row-assignee"
@@ -432,7 +432,6 @@ const MarginLeft = styled('div')`
432432
`;
433433

434434
const StyledLoadingIndicator = styled(LoadingIndicator)`
435-
height: 24px;
436435
margin: 0;
437436
margin-right: ${space(1.5)};
438437
`;

‎static/app/views/discover/table/quickContext/quickContextWrapper.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,7 @@ type NoContextProps = {
1515
export function NoContext({isLoading}: NoContextProps) {
1616
return isLoading ? (
1717
<NoContextWrapper>
18-
<LoadingIndicator
19-
data-test-id="quick-context-loading-indicator"
20-
hideMessage
21-
mini
22-
style={{width: '24px'}}
23-
/>
18+
<LoadingIndicator data-test-id="quick-context-loading-indicator" mini size={24} />
2419
</NoContextWrapper>
2520
) : (
2621
<NoContextWrapper>{t('Failed to load context for column.')}</NoContextWrapper>

‎static/app/views/explore/components/progressiveLoadingIndicator.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ function ProgressiveLoadingIndicator() {
1818
<Tooltip title={t('This widget is currently loading higher fidelity data.')}>
1919
<_ProgressiveLoadingIndicator
2020
relative
21-
hideMessage
2221
mini
2322
size={16}
2423
data-test-id="progressive-loading-indicator"

‎static/app/views/insights/common/components/fullSpanDescription.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export function FullSpanDescription({
6565
if (areIndexedSpansLoading || (isLoading && isFetching)) {
6666
return (
6767
<PaddedSpinner>
68-
<LoadingIndicator mini hideMessage relative />
68+
<LoadingIndicator mini relative />
6969
</PaddedSpinner>
7070
);
7171
}

‎static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ export function SeerSectionCtaButton({
203203
{getButtonText()}
204204
<ChevronContainer>
205205
{isAutofixInProgress ? (
206-
<StyledLoadingIndicator mini size={14} hideMessage />
206+
<StyledLoadingIndicator mini size={14} />
207207
) : (
208208
<Chevron direction="right" size="large" />
209209
)}

‎static/app/views/issueList/groupListBody.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function GroupListBody({
5555
const organization = useOrganization();
5656

5757
if (loading) {
58-
return <LoadingIndicator hideMessage />;
58+
return <LoadingIndicator />;
5959
}
6060

6161
if (error) {

‎static/app/views/nav/secondary/sections/issues/issueViews/issueViewAddViewButton.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,6 @@ export function IssueViewAddViewButton({baseUrl}: {baseUrl: string}) {
9090
}
9191

9292
const StyledLoadingIndicator = styled(LoadingIndicator)`
93-
width: 14px;
94-
height: 14px !important;
9593
margin: 0 !important;
9694
`;
9795

‎static/app/views/performance/transactionSummary/transactionTags/tagsHeatMap.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,7 @@ function TagsHeatMap(
335335
if (isTransactionsLoading) {
336336
return (
337337
<LoadingContainer>
338-
<LoadingIndicator size={40} hideMessage />
338+
<LoadingIndicator size={40} />
339339
</LoadingContainer>
340340
);
341341
}

‎static/gsApp/components/ai/AiSetupDataConsent.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,6 @@ const ButtonWrapper = styled('div')`
162162
const StyledLoadingIndicator = styled(LoadingIndicator)`
163163
&& {
164164
/* margin: 0 ${space(0.5)} 0 ${space(1)}; */
165-
height: 14px;
166-
width: 14px;
167165
}
168166
`;
169167

0 commit comments

Comments
 (0)