External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update setup loading screen (#926)

Browse Source
This commit is contained in:
klopez4212
2026-06-09 18:27:54 +01:00
committed by GitHub
parent c38301bca5
commit f362650195
2 changed files with 58 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/app/App.tsx
+16 -12
View File
@@ -20,20 +20,24 @@ import { createSproutQueryClient } from "@/shared/api/queryClient";
import { isSharedIdentity as isSharedIdentityCmd } from "@/shared/api/tauri";
import { listenForDeepLinks } from "@/shared/deep-link";
const LOADING_TEXT = "Setting up your workspace...";
function AppLoadingGate() {
return (
<div className="flex min-h-dvh items-center justify-center bg-[radial-gradient(circle_at_top,hsl(var(--primary)/0.14),transparent_48%),linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.55))] px-4 py-8">
<div className="w-full max-w-sm rounded-[28px] border border-border/70 bg-background/92 p-8 shadow-2xl backdrop-blur-sm">
<p className="text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
Sprout
</p>
<h1 className="mt-3 text-2xl font-semibold tracking-tight text-foreground">
Checking your setup
</h1>
<p className="mt-2 text-sm leading-6 text-muted-foreground">
One sec while we load your profile.
</p>
</div>
<div
className="sprout-setup-loading-shell flex min-h-dvh flex-col items-center justify-center overflow-hidden px-6 py-10"
data-testid="app-loading-gate"
role="status"
>
<h1
aria-live="polite"
className="mt-6 text-center text-3xl font-semibold tracking-tight text-foreground"
>
<span className="sr-only">{LOADING_TEXT}</span>
<span aria-hidden="true" className="sprout-setup-loading-text">
{LOADING_TEXT}
</span>
</h1>
</div>
);
}
desktop/src/shared/styles/globals.css
+42
View File
@@ -80,6 +80,48 @@
transform-origin: center;
}
.sprout-setup-loading-shell {
background-image:
radial-gradient(circle at top, hsl(var(--primary) / 0.18), transparent 46%),
radial-gradient(
circle at 50% 72%,
hsl(var(--foreground) / 0.08),
transparent 34%
),
linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.55));
}
.sprout-setup-loading-text {
animation: sprout-setup-character-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1)
both;
backface-visibility: hidden;
display: inline-block;
opacity: 0;
transform: translate3d(0, 32px, 0);
transform-origin: 50% 55%;
will-change: transform, opacity;
}
@keyframes sprout-setup-character-rise {
from {
opacity: 0;
transform: translate3d(0, 32px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.sprout-setup-loading-text {
animation: none;
opacity: 1;
transform: none;
}
}
.sprout-avatar-hue-scrubber {
background: linear-gradient(
90deg,