Skip to content

Commit 55b5fd9

Browse files
BilbBilb
committed
Merge remote-tracking branch 'upstream/feat/pro-settings' into feat/pro-libsession
2 parents 7aff697 + 485a13b commit 55b5fd9

File tree

6 files changed

+121
-21
lines changed

6 files changed

+121
-21
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,11 +44,11 @@ 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';
5049
import LIBSESSION_CONSTANTS from '../../../../../session/utils/libsession/libsession_constants';
5150
import { useDataFeatureFlag } from '../../../../../state/ducks/types/releasedFeaturesReduxTypes';
51+
import { AnimatedSpinnerIcon } from '../../../../loading/spinner/AnimatedSpinnerIcon';
5252

5353
// TODO: There are only 2 props here and both are passed to the nonorigin modal dispatch, can probably be in their own object
5454
type SectionProps = {
@@ -848,7 +848,7 @@ function ManageProPreviousAccess({ returnToThisModalAction, centerAlign }: Secti
848848
color={isDarkTheme && !isError && !isLoading ? 'var(--primary-color)' : undefined}
849849
iconElement={
850850
isLoading ? (
851-
<SessionSpinner loading height="18px" />
851+
<AnimatedSpinnerIcon size="huge" />
852852
) : (
853853
<PanelIconLucideIcon unicode={LUCIDE_ICONS_UNICODE.CIRCLE_PLUS} />
854854
)
@@ -952,10 +952,10 @@ function PageHero() {
952952
}
953953
if (isLoading) {
954954
return (
955-
<>
955+
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--margins-xs)' }}>
956956
<Localizer token={neverHadPro ? 'checkingProStatus' : 'proStatusLoading'} />
957-
<SessionSpinner loading height="6px" width="60px" />
958-
</>
957+
<AnimatedSpinnerIcon size="small" />
958+
</div>
959959
);
960960
}
961961
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+
}

‎ts/hooks/useHasPro.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,9 @@ export enum ProOriginatingPlatform {
8585
function useMockProAccessExpiry() {
8686
const variant = useDataFeatureFlag('mockProAccessExpiry') ?? MockProAccessExpiryOptions.P30D;
8787

88-
// NOTE: for testing the expiry time should be pinned to x + 250ms after "now", the +250ms prevents render lag from changing the timestamp
89-
const now = variant ? Date.now() + 250 : 0;
88+
// NOTE: the mock expiry time should be pinned to x - 250ms after "now", the -250ms ensures the string
89+
// representation rounds up to the expected mock value and prevents render lag from changing the timestamp
90+
const now = variant !== null ? Date.now() - 250 : 0;
9091
switch (variant) {
9192
case MockProAccessExpiryOptions.P7D:
9293
return now + 7 * 24 * 60 * 60 * 1000;

0 commit comments

Comments
 (0)