diff --git a/ts/components/DonationProgressModal.tsx b/ts/components/DonationProgressModal.tsx
index d7b17315c4..29747b455b 100644
--- a/ts/components/DonationProgressModal.tsx
+++ b/ts/components/DonationProgressModal.tsx
@@ -37,7 +37,9 @@ export function DonationProgressModal(props: PropsType): JSX.Element {
noEscapeClose
noMouseClose
>
-
+
+
+
{i18n('icu:Donations__Processing')}
diff --git a/ts/components/PlaybackButton.stories.tsx b/ts/components/PlaybackButton.stories.tsx
index a7e072ee29..f75685ab2a 100644
--- a/ts/components/PlaybackButton.stories.tsx
+++ b/ts/components/PlaybackButton.stories.tsx
@@ -9,6 +9,7 @@ import type { ButtonProps } from './PlaybackButton';
import { PlaybackButton } from './PlaybackButton';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
import { ThemeType } from '../types/Util';
+import { AUDIO_MP3 } from '../types/MIME';
export default {
title: 'components/PlaybackButton',
@@ -50,6 +51,16 @@ export function Default(): JSX.Element {
key={`${variant}_${context}_${mod}`}
variant={variant}
label="playback"
+ attachment={
+ mod === 'downloading'
+ ? undefined
+ : {
+ contentType: AUDIO_MP3,
+ size: 3000,
+ totalDownloaded: 1000,
+ isPermanentlyUndownloadable: false,
+ }
+ }
onClick={action('click')}
context={context}
mod={mod}
diff --git a/ts/components/PlaybackButton.tsx b/ts/components/PlaybackButton.tsx
index d217fd1890..db82b17f82 100644
--- a/ts/components/PlaybackButton.tsx
+++ b/ts/components/PlaybackButton.tsx
@@ -5,7 +5,7 @@ import { animated, useSpring } from '@react-spring/web';
import classNames from 'classnames';
import React, { useCallback } from 'react';
import { useReducedMotion } from '../hooks/useReducedMotion';
-import { ProgressCircle } from './ProgressCircle';
+import type { AttachmentForUIType } from '../types/Attachment';
import { SpinnerV2 } from './SpinnerV2';
const SPRING_CONFIG = {
@@ -19,7 +19,7 @@ export type ButtonProps = {
context?: 'incoming' | 'outgoing';
variant: 'message' | 'mini' | 'draft';
mod: 'play' | 'pause' | 'not-downloaded' | 'downloading' | 'computing';
- downloadFraction?: number;
+ attachment?: AttachmentForUIType;
label: string;
visible?: boolean;
onClick: () => void;
@@ -32,7 +32,7 @@ export const PlaybackButton = React.forwardRef
(
function ButtonInner(props, ref) {
const {
context,
- downloadFraction,
+ attachment,
label,
mod,
onClick,
@@ -84,25 +84,24 @@ export const PlaybackButton = React.forwardRef(
let content: JSX.Element | null = null;
const strokeWidth = variant === 'message' ? 2 : 1;
- if (mod === 'downloading' && downloadFraction) {
+ if (mod === 'computing' || mod === 'downloading') {
content = (
-
- );
- } else if (
- mod === 'computing' ||
- (mod === 'downloading' && !downloadFraction)
- ) {
- content = (
-
+
);
diff --git a/ts/components/ProgressCircle.stories.tsx b/ts/components/ProgressCircle.stories.tsx
deleted file mode 100644
index 2868bb8362..0000000000
--- a/ts/components/ProgressCircle.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2024 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-
-import { ProgressCircle } from './ProgressCircle';
-import type { ComponentMeta } from '../storybook/types';
-
-type Props = React.ComponentProps
;
-export default {
- title: 'Components/ProgressCircle',
- component: ProgressCircle,
- args: {
- fractionComplete: 0,
- width: undefined,
- strokeWidth: undefined,
- ariaLabel: undefined,
- },
-} satisfies ComponentMeta;
-
-export function Zero(args: Props): JSX.Element {
- return ;
-}
-
-export function Thirty(args: Props): JSX.Element {
- return ;
-}
-
-export function Done(args: Props): JSX.Element {
- return ;
-}
-export function Increasing(args: Props): JSX.Element {
- const fractionComplete = useIncreasingFractionComplete();
- return ;
-}
-
-function useIncreasingFractionComplete() {
- const [fractionComplete, setFractionComplete] = React.useState(0);
- React.useEffect(() => {
- if (fractionComplete >= 1) {
- return;
- }
- const timeout = setTimeout(() => {
- setFractionComplete(cur => Math.min(1, cur + 0.1));
- }, 300);
- return () => clearTimeout(timeout);
- }, [fractionComplete]);
- return fractionComplete;
-}
diff --git a/ts/components/ProgressCircle.tsx b/ts/components/ProgressCircle.tsx
deleted file mode 100644
index b227c4d720..0000000000
--- a/ts/components/ProgressCircle.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright 2024 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-
-export function ProgressCircle({
- fractionComplete,
- width = 24,
- strokeWidth = 3,
- ariaLabel,
-}: {
- fractionComplete: number;
- width?: number;
- strokeWidth?: number;
- ariaLabel?: string;
-}): JSX.Element {
- const radius = width / 2 - strokeWidth / 2;
- const circumference = radius * 2 * Math.PI;
- const widthInPixels = `${width}px`;
-
- return (
-
- );
-}
diff --git a/ts/components/SpinnerV2.stories.tsx b/ts/components/SpinnerV2.stories.tsx
index d94a8bb4f5..60615c6de5 100644
--- a/ts/components/SpinnerV2.stories.tsx
+++ b/ts/components/SpinnerV2.stories.tsx
@@ -1,9 +1,10 @@
// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
import { SpinnerV2 } from './SpinnerV2';
+import { tw } from '../axo/tw';
import type { ComponentMeta } from '../storybook/types';
import type { Props } from './SpinnerV2';
@@ -12,42 +13,85 @@ export default {
title: 'Components/SpinnerV2',
component: SpinnerV2,
argTypes: {
+ variant: {
+ options: ['normal', 'no-background', 'no-background-incoming', 'brand'],
+ control: { type: 'select' },
+ },
size: { control: { type: 'number' } },
+ value: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
strokeWidth: { control: { type: 'number' } },
marginRatio: { control: { type: 'number' } },
},
- args: { size: 36, strokeWidth: 2, className: undefined, marginRatio: 0.8 },
+ args: {
+ size: 36,
+ strokeWidth: 2,
+ marginRatio: 0.8,
+ min: 0,
+ max: 1,
+ value: undefined,
+ variant: 'normal',
+ ariaLabel: 'label',
+ },
} satisfies ComponentMeta;
export function Default(args: Props): JSX.Element {
- return ;
-}
-
-export function Thin(args: Props): JSX.Element {
- return ;
-}
-
-export function Thick(args: Props): JSX.Element {
- return ;
-}
-
-export function NoMargin(args: Props): JSX.Element {
- return ;
-}
-
-export function BigMargin(args: Props): JSX.Element {
- return ;
-}
-
-export function Styled(args: Props): JSX.Element {
return (
-
-
-
+
+
+
+ );
+}
+
+export function Thin(args: Props): JSX.Element {
+ return (
+
+
+
+ );
+}
+
+export function Thick(args: Props): JSX.Element {
+ return (
+
+
+
+ );
+}
+
+export function NoMargin(args: Props): JSX.Element {
+ return (
+
+
+
+ );
+}
+
+export function BigMargin(args: Props): JSX.Element {
+ return (
+
+
+
+ );
+}
+
+export function SpinnerToProgress(args: Props): JSX.Element {
+ const [value, setValue] = useState
();
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setValue(v => {
+ if (v == null) {
+ return 0.3;
+ }
+ return undefined;
+ });
+ }, 2000);
+ return () => {
+ clearInterval(timer);
+ };
+ });
+ return (
+
+
);
}
diff --git a/ts/components/SpinnerV2.tsx b/ts/components/SpinnerV2.tsx
index fd6c3b9008..031923bfb8 100644
--- a/ts/components/SpinnerV2.tsx
+++ b/ts/components/SpinnerV2.tsx
@@ -2,39 +2,135 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
-import classNames from 'classnames';
+
+import { tw, type TailwindStyles } from '../axo/tw';
+import { roundFractionForProgressBar } from '../util/numbers';
export type Props = {
- className?: string;
+ value?: number | 'indeterminate'; // default: 'indeterminate'
+ min?: number; // default: 0
+ max?: number; // default: 1
+ variant?: SpinnerVariant;
+ ariaLabel?: string;
marginRatio?: number;
size: number;
strokeWidth: number;
};
+type SpinnerVariantStyles = Readonly<{
+ fg: TailwindStyles;
+ bg: TailwindStyles;
+}>;
+
+const SpinnerVariants = {
+ normal: {
+ bg: tw('stroke-label-disabled-on-color'),
+ fg: tw('stroke-label-primary-on-color'),
+ },
+ 'no-background': {
+ bg: tw('stroke-none'),
+ fg: tw('stroke-label-primary-on-color'),
+ },
+ 'no-background-incoming': {
+ bg: tw('stroke-none'),
+ fg: tw('stroke-label-primary'),
+ },
+ brand: {
+ bg: tw('stroke-fill-secondary'),
+ fg: tw('stroke-border-selected'),
+ },
+} as const satisfies Record;
+
+export type SpinnerVariant = keyof typeof SpinnerVariants;
+
export function SpinnerV2({
- className,
+ value = 'indeterminate',
+ min = 0,
+ max = 1,
+ variant = 'normal',
marginRatio,
size,
strokeWidth,
+ ariaLabel,
}: Props): JSX.Element {
- const radius = Math.min(size - strokeWidth / 2, size * (marginRatio ?? 0.8));
+ const sizeInPixels = `${size}px`;
+
+ const radius = Math.min(
+ size / 2 - strokeWidth / 2,
+ (size / 2) * (marginRatio ?? 0.8)
+ );
+ const circumference = radius * 2 * Math.PI;
+
+ const { bg, fg } = SpinnerVariants[variant];
+
+ const bgElem = (
+
+ );
+
+ if (value === 'indeterminate') {
+ return (
+
+ );
+ }
+ const fractionComplete = roundFractionForProgressBar(
+ (value - min) / (max - min)
+ );
+
return (
);
}
diff --git a/ts/components/conversation/AttachmentDetailPill.tsx b/ts/components/conversation/AttachmentDetailPill.tsx
index 7645ca8c8c..3e56f6c468 100644
--- a/ts/components/conversation/AttachmentDetailPill.tsx
+++ b/ts/components/conversation/AttachmentDetailPill.tsx
@@ -5,13 +5,11 @@ import React from 'react';
import classNames from 'classnames';
import { formatFileSize } from '../../util/formatFileSize';
-import { ProgressCircle } from '../ProgressCircle';
+import { SpinnerV2 } from '../SpinnerV2';
import type { AttachmentForUIType } from '../../types/Attachment';
import type { LocalizerType } from '../../types/I18N';
-import { Spinner } from '../Spinner';
import { isKeyboardActivation } from '../../hooks/useKeyboardShortcuts';
-import { roundFractionForProgressBar } from '../../util/numbers';
export type PropsType = {
attachments: ReadonlyArray;
@@ -130,20 +128,21 @@ export function AttachmentDetailPill({
{formatFileSize(totalSize)}
- {formatFileSize(totalSize)}
-
- );
}
return (
diff --git a/ts/components/conversation/AttachmentStatusIcon.tsx b/ts/components/conversation/AttachmentStatusIcon.tsx
index 6e6c2ef94c..3bb60c40ad 100644
--- a/ts/components/conversation/AttachmentStatusIcon.tsx
+++ b/ts/components/conversation/AttachmentStatusIcon.tsx
@@ -4,11 +4,10 @@
import React, { useRef, useState } from 'react';
import classNames from 'classnames';
-import { ProgressCircle } from '../ProgressCircle';
+import { SpinnerV2 } from '../SpinnerV2';
import { usePrevious } from '../../hooks/usePrevious';
import type { AttachmentForUIType } from '../../types/Attachment';
-import { roundFractionForProgressBar } from '../../util/numbers';
const TRANSITION_DELAY = 200;
@@ -110,15 +109,12 @@ export function AttachmentStatusIcon({
(state === IconState.Downloaded && isWaiting))
) {
const { size, totalDownloaded } = attachment;
- let downloadFraction =
- size && totalDownloaded
- ? roundFractionForProgressBar(totalDownloaded / size)
- : undefined;
+ let spinnerValue = (size && totalDownloaded) || undefined;
if (state === IconState.Downloading && isWaiting) {
- downloadFraction = undefined;
+ spinnerValue = undefined;
}
if (state === IconState.Downloaded && isWaiting) {
- downloadFraction = 1;
+ spinnerValue = size;
}
return (
@@ -131,22 +127,24 @@ export function AttachmentStatusIcon({
: undefined
)}
>
- {downloadFraction ? (
-
- ) : undefined}
+
+
+
-
-
-
- );
- }
-
- if (!attachment.pending) {
- return undefined;
- }
+ const spinnerValue =
+ (attachment.pending &&
+ !isIncremental(attachment) &&
+ attachment.size &&
+ attachment.totalDownloaded) ||
+ undefined;
return (