mirrors/read-frog
2
0
Fork 0
mirror of https://github.com/mengxi-ream/read-frog.git synced 2026-04-30 01:56:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): soften page translation loading spinner (#1297)

Browse source
This commit is contained in:
GuaGua 2026-04-08 09:19:28 -07:00 • committed by GitHub
commit acdd296e19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.changeset/late-owls-bathe.md Normal file
View file

@ -0,0 +1,5 @@
---
"@read-frog/extension": patch
---
fix(extension): soften page translation loading spinner with a thinner muted-gray arc

15
src/utils/host/translate/ui/__tests__/spinner.test.ts
View file

@ -64,7 +64,18 @@ describe("spinner", () => {
expect(spinner.className).toBe("read-frog-spinner")
})
it("keeps the primary segment visible when reduced motion is enabled", async () => {
it("uses a thin gray spinner arc without a background ring", async () => {
const { createLightweightSpinner } = await import("../spinner")
const spinner = createLightweightSpinner(document)
expect(spinner.style.borderTopColor).toBe("var(--read-frog-muted-foreground)")
expect(spinner.style.borderRightColor).toBe("transparent")
expect(spinner.style.borderBottomColor).toBe("transparent")
expect(spinner.style.borderLeftColor).toBe("transparent")
expect(spinner.style.borderTopWidth).toBe("1.5px")
})
it("keeps the gray segment visible when reduced motion is enabled", async () => {
Object.defineProperty(window, "matchMedia", {
value: vi.fn().mockReturnValue({
matches: true,
@ -91,6 +102,6 @@ describe("spinner", () => {
const spinner = createLightweightSpinner(document)
expect(animateMock).not.toHaveBeenCalled()
expect(spinner.style.borderTopColor).toBe("var(--read-frog-primary)")
expect(spinner.style.borderTopColor).toBe("var(--read-frog-muted-foreground)")
})
})

16
src/utils/host/translate/ui/spinner.ts
View file

@ -17,9 +17,9 @@ import { ensurePresetStyles } from "./style-injector"
export function createLightweightSpinner(ownerDoc: Document): HTMLElement {
const spinner = ownerDoc.createElement("span")
spinner.className = "read-frog-spinner"
// Inline styles to match the original spinner design
// add important to make the styles don't get overridden by the host page styles,
// Otherwise, in some page like https://www.reddit.com/r/canadaexpressentry/, some spinners size will be overridden by the host page styles.
// Inline styles keep the spinner resilient against host page CSS overrides.
// Use a thin muted arc with transparent sides so bulk page translation does
// not paint a dense field of high-contrast rings across the screen.
spinner.style.cssText = `
display: inline-block !important;
width: 6px !important;
@ -32,8 +32,8 @@ export function createLightweightSpinner(ownerDoc: Document): HTMLElement {
margin: 0 4px !important;
padding: 0 !important;
vertical-align: middle !important;
border: 3px solid var(--read-frog-muted) !important;
border-top: 3px solid var(--read-frog-primary) !important;
border: 1.5px solid transparent !important;
border-top: 1.5px solid var(--read-frog-muted-foreground) !important;
border-radius: 50% !important;
box-sizing: content-box !important;
flex-shrink: 0 !important;
@ -61,9 +61,9 @@ export function createLightweightSpinner(ownerDoc: Document): HTMLElement {
}
else {
// For reduced motion or when Web Animations API isn't available,
// keep a static spinner while preserving the primary segment so the
// loading state stays visible without requiring animation.
spinner.style.borderTopColor = "var(--read-frog-primary)"
// keep a static muted segment so the loading state stays visible
// without requiring animation.
spinner.style.borderTopColor = "var(--read-frog-muted-foreground)"
}
return spinner