Skip to content

Commit 485a13b

Browse files
AerilymAerilym
committed
chore: use new animated spinner on pro dialogs and network page
1 parent 6844a0b commit 485a13b

File tree

5 files changed

+118
-19
lines changed

5 files changed

+118
-19
lines changed

‎ts/components/buttons/panel/PanelChevronButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
GenericPanelButtonWithAction,
66
type GenericPanelButtonProps,
77
} from './GenericPanelButtonWithAction';
8-
import { SessionSpinner } from '../../loading';
8+
import { AnimatedSpinnerIcon } from '../../loading/spinner/AnimatedSpinnerIcon';
99

1010
type PanelChevronButtonProps = Pick<GenericPanelButtonProps, 'textElement'> & {
1111
onClick?: (...args: Array<any>) => void;
@@ -24,7 +24,7 @@ export const PanelChevronButton = (props: PanelChevronButtonProps) => {
2424
textElement={textElement}
2525
actionElement={
2626
showAnimatedSpinnerIcon ? (
27-
<SessionSpinner loading height="18px" />
27+
<AnimatedSpinnerIcon size="huge" />
2828
) : (
2929
<SessionLucideIconButton
3030
disabled={disabled}

‎ts/components/dialog/user-settings/pages/network/NodeImage.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { type SVGProps, type JSX } from 'react';
22
import styled from 'styled-components';
33
import { Block } from './components';
4-
import { SessionSpinner } from '../../../../loading';
5-
import { StyledSessionSpinner } from '../../../../loading/spinner/StyledSessionSpinner';
64
import { NodeGraph1 } from './nodes/NodeGraph1';
75
import { NodeGraph10 } from './nodes/NodeGraph10';
86
import { NodeGraph2 } from './nodes/NodeGraph2';
@@ -14,18 +12,22 @@ import { NodeGraph7 } from './nodes/NodeGraph7';
1412
import { NodeGraph8 } from './nodes/NodeGraph8';
1513
import { NodeGraph9 } from './nodes/NodeGraph9';
1614
import { useSecuringNodesCount } from './sections/network/hooks/useSecuringNodesCount';
15+
import {
16+
AnimatedSpinnerIcon,
17+
AnimatedSpinnerIconWrapper,
18+
} from '../../../../loading/spinner/AnimatedSpinnerIcon';
1719

1820
const StyledNodeImage = styled(Block)`
1921
display: flex;
2022
justify-content: center;
2123
align-items: center;
2224
23-
${StyledSessionSpinner} {
25+
${AnimatedSpinnerIconWrapper} {
2426
margin: auto;
2527
}
2628
2729
svg,
28-
${StyledSessionSpinner} {
30+
${AnimatedSpinnerIconWrapper} {
2931
position: absolute;
3032
inset: 0;
3133
}
@@ -81,11 +83,7 @@ export const NodeImage = ({ width, height, loading }: Props) => {
8183
style={{ position: 'relative', overflow: 'hidden' }}
8284
data-testid="swarm-image"
8385
>
84-
{ready ? (
85-
<NodeComp {...sharedNodeProps} />
86-
) : (
87-
<SessionSpinner loading={true} width="96px" height={'96px'} />
88-
)}
86+
{ready ? <NodeComp {...sharedNodeProps} /> : <AnimatedSpinnerIcon size="huge2" />}
8987
</StyledNodeImage>
9088
);
9189
};

‎ts/components/dialog/user-settings/pages/network/sections/network/NetworkSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
formatDateWithLocale,
2727
} from '../../../../../../../util/i18n/formatting/generics';
2828
import { abbreviateNumber } from '../../../../../../../util/numbers';
29-
import { SessionSpinner } from '../../../../../../loading';
3029
import { useHTMLDirection } from '../../../../../../../util/i18n/rtlSupport';
3130
import {
3231
usePriceTimestamp,
@@ -43,6 +42,7 @@ import {
4342
import { SessionLucideIconButton } from '../../../../../../icon/SessionIconButton';
4443
import { LUCIDE_ICONS_UNICODE } from '../../../../../../icon/lucide';
4544
import { SessionTooltip } from '../../../../../../SessionTooltip';
45+
import { AnimatedSpinnerIcon } from '../../../../../../loading/spinner/AnimatedSpinnerIcon';
4646

4747
const StyledStatsNumber = styled.strong`
4848
font-size: var(--font-size-h3-new);
@@ -85,7 +85,7 @@ const NodesStats = ({ style }: { style?: CSSProperties }) => {
8585
swarmNodeCount ? (
8686
swarmNodeCount
8787
) : (
88-
<SessionSpinner loading={true} width="64px" height={'64px'} />
88+
<AnimatedSpinnerIcon size="huge" />
8989
)}
9090
</StyledStatsNumber>
9191
</Flex>
@@ -106,7 +106,7 @@ const NodesStats = ({ style }: { style?: CSSProperties }) => {
106106
{!dataIsStale && securingNodesCount && !isFakeRefreshing ? (
107107
`${abbreviateNumber(securingNodesCount, 0).toUpperCase()}`
108108
) : (
109-
<SessionSpinner loading={true} width="64px" height={'64px'} />
109+
<AnimatedSpinnerIcon size="huge" />
110110
)}
111111
</StyledStatsNumber>
112112
</Flex>

‎ts/components/dialog/user-settings/pages/user-pro/ProSettingsPage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ import {
4444
import { SessionButton, SessionButtonColor } from '../../../../basic/SessionButton';
4545
import { proButtonProps } from '../../../SessionProInfoModal';
4646
import { useIsProGroupsAvailable } from '../../../../../hooks/useIsProAvailable';
47-
import { SessionSpinner } from '../../../../loading';
4847
import { SpacerMD } from '../../../../basic/Text';
4948
import { sleepFor } from '../../../../../session/utils/Promise';
49+
import { AnimatedSpinnerIcon } from '../../../../loading/spinner/AnimatedSpinnerIcon';
5050

5151
// TODO: There are only 2 props here and both are passed to the nonorigin modal dispatch, can probably be in their own object
5252
type SectionProps = {
@@ -832,7 +832,7 @@ function ManageProPreviousAccess({ returnToThisModalAction, centerAlign }: Secti
832832
color={isDarkTheme && !isError && !isLoading ? 'var(--primary-color)' : undefined}
833833
iconElement={
834834
isLoading ? (
835-
<SessionSpinner loading height="18px" />
835+
<AnimatedSpinnerIcon size="huge" />
836836
) : (
837837
<PanelIconLucideIcon unicode={LUCIDE_ICONS_UNICODE.CIRCLE_PLUS} />
838838
)
@@ -933,10 +933,10 @@ function PageHero() {
933933
}
934934
if (isLoading) {
935935
return (
936-
<>
936+
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--margins-xs)' }}>
937937
<Localizer token={neverHadPro ? 'checkingProStatus' : 'proStatusLoading'} />
938-
<SessionSpinner loading height="6px" width="60px" />
939-
</>
938+
<AnimatedSpinnerIcon size="small" />
939+
</div>
940940
);
941941
}
942942
return null;

‎ts/components/loading/spinner/AnimatedSpinnerIcon.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import styled from 'styled-components';
2+
import { SessionIconSize } from '../../icon';
3+
import { IconSizeToPxStr } from '../../icon/SessionIcon';
4+
5+
export const AnimatedSpinnerIconWrapper = styled.div<{ size: SessionIconSize }>`
6+
height: ${props => IconSizeToPxStr[props.size]};
7+
width: ${props => IconSizeToPxStr[props.size]};
8+
`;
9+
10+
type AnimatedSpinnerIconProps = {
11+
size: SessionIconSize;
12+
};
13+
14+
export function AnimatedSpinnerIcon({ size }: AnimatedSpinnerIconProps) {
15+
return (
16+
<AnimatedSpinnerIconWrapper size={size}>
17+
<svg
18+
xmlns="http://www.w3.org/2000/svg"
19+
fill="none"
20+
stroke="var(--text-primary-color)"
21+
stroke-linecap="round"
22+
stroke-linejoin="round"
23+
stroke-width="2"
24+
viewBox="0 0 24 24"
25+
>
26+
<path d="M12 2v4">
27+
<animate
28+
attributeName="stroke-opacity"
29+
begin="0s"
30+
dur="1.6s"
31+
repeatCount="indefinite"
32+
values="1;0.2;1"
33+
/>
34+
</path>
35+
<path d="m16.2 7.8 2.9-2.9">
36+
<animate
37+
attributeName="stroke-opacity"
38+
begin="0.2s"
39+
dur="1.6s"
40+
repeatCount="indefinite"
41+
values="1;0.2;1"
42+
/>
43+
</path>
44+
<path d="M18 12h4">
45+
<animate
46+
attributeName="stroke-opacity"
47+
begin="0.4s"
48+
dur="1.6s"
49+
repeatCount="indefinite"
50+
values="1;0.2;1"
51+
/>
52+
</path>
53+
<path d="m16.2 16.2 2.9 2.9">
54+
<animate
55+
attributeName="stroke-opacity"
56+
begin="0.6s"
57+
dur="1.6s"
58+
repeatCount="indefinite"
59+
values="1;0.2;1"
60+
/>
61+
</path>
62+
<path d="M12 18v4">
63+
<animate
64+
attributeName="stroke-opacity"
65+
begin="0.8s"
66+
dur="1.6s"
67+
repeatCount="indefinite"
68+
values="1;0.2;1"
69+
/>
70+
</path>
71+
<path d="m4.9 19.1 2.9-2.9">
72+
<animate
73+
attributeName="stroke-opacity"
74+
begin="1.0s"
75+
dur="1.6s"
76+
repeatCount="indefinite"
77+
values="1;0.2;1"
78+
/>
79+
</path>
80+
<path d="M2 12h4">
81+
<animate
82+
attributeName="stroke-opacity"
83+
begin="1.2s"
84+
dur="1.6s"
85+
repeatCount="indefinite"
86+
values="1;0.2;1"
87+
/>
88+
</path>
89+
<path d="m4.9 4.9 2.9 2.9">
90+
<animate
91+
attributeName="stroke-opacity"
92+
begin="1.4s"
93+
dur="1.6s"
94+
repeatCount="indefinite"
95+
values="1;0.2;1"
96+
/>
97+
</path>
98+
</svg>
99+
</AnimatedSpinnerIconWrapper>
100+
);
101+
}

0 commit comments

Comments
 (0)