Skip to content

Spinner | Update site spinner announcement read-out #6825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tycup wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Spinner | Update site spinner announcement read-out #6825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/src/examples/spinner/Large.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ import { Spinner } from "@salt-ds/core";
import type { ReactElement } from "react";

export const Large = (): ReactElement => (
<Spinner aria-label="loading" role="status" size="large" />
<Spinner aria-label="loading" disableAnnouncer size="large" />

@joshwooding joshwooding Jul 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jake-costa @tycup and I discussed this and to improve the experience in the docs we're going to disable the announcement for the sizes

);
34 changes: 22 additions & 12 deletions site/src/examples/spinner/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,41 @@ import { Button, Spinner, StackLayout, Text } from "@salt-ds/core";
import { type ReactElement, useEffect, useState } from "react";

const LOADING_DELAY = 2000;
const LOADING_MESSAGE = "Please wait for the action to complete";
const COMPLETION_MESSAGE = "Action complete";

export const Loading = (): ReactElement => {
const [isLoading, setIsLoading] = useState<boolean>(true);

useEffect(() => {
setTimeout(() => {
if (!isLoading) return;

const loadingTimer = setTimeout(() => {
setIsLoading(false);
}, LOADING_DELAY);
}, []);

return isLoading ? (
<StackLayout align="center">
<Text>Please wait for the action to complete</Text>
<Spinner size="large" aria-label="loading" role="status" />
</StackLayout>
) : (
return () => {
clearTimeout(loadingTimer);
};
}, [isLoading]);

return (
<StackLayout align="center">
<Text>Action Complete</Text>
<Text>{isLoading ? LOADING_MESSAGE : COMPLETION_MESSAGE}</Text>
{isLoading && (
<Spinner
size="large"
aria-label={`Loading, ${LOADING_MESSAGE.toLowerCase()}`}
completionAnnouncement={COMPLETION_MESSAGE}
role="status"
/>
)}
<Button
disabled={isLoading}
focusableWhenDisabled
sentiment="accented"
onClick={() => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, LOADING_DELAY);
}}
>
Reload
Expand Down
32 changes: 22 additions & 10 deletions site/src/examples/spinner/LoadingPartial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
import styles from "./LoadingPartial.module.css";

const LOADING_DELAY = 2000;
const LOADING_MESSAGE = "Reloading panel";
const COMPLETION_MESSAGE = "Panel reloaded";

type LoadingItemProps = ComponentPropsWithoutRef<typeof GridItem> & {
isLoading: boolean;
Expand Down Expand Up @@ -47,16 +49,30 @@ export const LoadingPartial = (): ReactElement => {
const [isLoading, setIsLoading] = useState<boolean>(true);

useEffect(() => {
setTimeout(() => {
if (!isLoading) return;

const loadingTimer = setTimeout(() => {
setIsLoading(false);
}, LOADING_DELAY);
}, []);

return () => {
clearTimeout(loadingTimer);
};
}, [isLoading]);

return (
<StackLayout align="stretch">
<GridLayout columns={4} rows={3} gap={1} className={styles.loadingGrid}>
<LoadingItem isLoading={isLoading} colSpan={2} rowSpan={2}>
{isLoading ? <Spinner aria-label="loading" role="status" /> : 1}
{isLoading ? (
<Spinner
aria-label={LOADING_MESSAGE}
completionAnnouncement={COMPLETION_MESSAGE}
role="status"
/>
) : (
1
)}
</LoadingItem>
<LoadingItem isLoading={false} colSpan={1} rowSpan={1}>
2
Expand All @@ -78,16 +94,12 @@ export const LoadingPartial = (): ReactElement => {
</LoadingItem>
</GridLayout>
<Button
disabled={isLoading}
focusableWhenDisabled
sentiment="accented"
onClick={() => {
if (!isLoading) {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, LOADING_DELAY);
}
setIsLoading(true);
}}
disabled={isLoading}
>
Reload Panel
</Button>
Expand Down
2 changes: 1 addition & 1 deletion site/src/examples/spinner/Medium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ import { Spinner } from "@salt-ds/core";
import type { ReactElement } from "react";

export const Medium = (): ReactElement => (
<Spinner aria-label="loading" role="status" size="medium" />
<Spinner aria-label="loading" disableAnnouncer size="medium" />
);
2 changes: 1 addition & 1 deletion site/src/examples/spinner/Small.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ import { Spinner } from "@salt-ds/core";
import type { ReactElement } from "react";

export const Small = (): ReactElement => (
<Spinner aria-label="loading" role="status" size="small" />
<Spinner aria-label="loading" disableAnnouncer size="small" />
);
Loading