Skip to content

Remove the outdated a. logo from desktop loading screens. #6932

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

Merged
ComputelessComputer merged 5 commits into from
Aug 20, 2026
Merged

Remove the outdated a. logo from desktop loading screens. #6932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ff5ff8
Remove the outdated a. logo from desktop loading screens.
ComputelessComputer Aug 19, 2026
520541f
Replace the splash analog mark with the app-icon a_.
ComputelessComputer Aug 19, 2026
13e993f
Explain slow data updates during startup
ComputelessComputer Aug 19, 2026
aa2e4cc
Scope startup guidance to database preparation
ComputelessComputer Aug 19, 2026
be450da
fix: explain actual work during slow startup
ComputelessComputer Aug 19, 2026
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
72 changes: 52 additions & 20 deletions apps/desktop/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
justify-content: center;
background: hsl(60 9% 98%);
}
.boot-splash-content {
display: flex;
flex-direction: column;
align-items: center;
}
body:has(#root:not(:empty)) #boot-splash {
display: none;
}
Expand Down Expand Up @@ -70,6 +75,21 @@
html.dark .boot-splash-highlight {
color: hsl(60 9% 98% / 0.5);
}
.boot-splash-detail {
max-width: 16rem;
margin: 1.25rem 0 0;
color: hsl(25 5% 45%);
font-family:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.75rem;
line-height: 1rem;
text-align: center;
opacity: 0;
animation: boot-splash-detail-reveal 0s linear 2s forwards;
}
html.dark .boot-splash-detail {
color: hsl(25 5% 55%);
}
@keyframes boot-splash-shimmer {
0% {
-webkit-mask-position: 120% 0%;
Expand All @@ -80,6 +100,11 @@
mask-position: -20% 0%;
}
}
@keyframes boot-splash-detail-reveal {
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.boot-splash-highlight {
animation: none;
Expand All @@ -91,30 +116,37 @@
</head>
<body spellcheck="false">
<div id="boot-splash" data-tauri-drag-region aria-hidden="true">
<div class="boot-splash-mark">
<svg
class="boot-splash-base"
viewBox="0 0 1082 784"
fill="currentColor"
aria-hidden="true"
>
<path
d="M600 391.5C600 276.349 506.651 183 391.5 183C276.349 183 183 276.349 183 391.5C183 444.961 199.068 500.988 227.187 541.12C253.747 579.028 288.181 600 333 600C417.378 600 486.223 527.628 495.045 418.497C496.113 405.286 506.745 394.509 520 394.509H596.985C598.648 394.509 600 393.163 600 391.5ZM783 391.5C783 454.618 781.537 512.253 795.278 556.615C801.439 576.506 808.593 585.812 813.92 590.27C816.268 592.234 820.533 595.241 828.701 597.392C841.519 600.767 852.5 610.745 852.5 624V759C852.5 772.255 841.734 783.114 828.52 782.074C777.88 778.088 733.031 761.198 696.486 730.621C672.723 710.738 655.202 687.348 642.198 663.186C632.309 644.812 603.663 641.741 590.781 658.157C532.985 731.805 446.926 783 333 783C217.819 783 131.503 723.472 77.3135 646.13C24.6818 571.012 0 477.038 0 391.5C0 175.281 175.281 0 391.5 0C607.719 0 783 175.281 783 391.5Z"
/>
<path
d="M1057.5 600.5C1070.75 600.5 1081.5 611.245 1081.5 624.5V759.5C1081.5 772.755 1070.75 783.5 1057.5 783.5H922.5C909.245 783.5 898.5 772.755 898.5 759.5V624.5C898.5 611.245 909.245 600.5 922.5 600.5H1057.5Z"
/>
</svg>
<div class="boot-splash-highlight" aria-hidden="true">
<svg viewBox="0 0 1082 784" fill="currentColor">
<path
d="M600 391.5C600 276.349 506.651 183 391.5 183C276.349 183 183 276.349 183 391.5C183 444.961 199.068 500.988 227.187 541.12C253.747 579.028 288.181 600 333 600C417.378 600 486.223 527.628 495.045 418.497C496.113 405.286 506.745 394.509 520 394.509H596.985C598.648 394.509 600 393.163 600 391.5ZM783 391.5C783 454.618 781.537 512.253 795.278 556.615C801.439 576.506 808.593 585.812 813.92 590.27C816.268 592.234 820.533 595.241 828.701 597.392C841.519 600.767 852.5 610.745 852.5 624V759C852.5 772.255 841.734 783.114 828.52 782.074C777.88 778.088 733.031 761.198 696.486 730.621C672.723 710.738 655.202 687.348 642.198 663.186C632.309 644.812 603.663 641.741 590.781 658.157C532.985 731.805 446.926 783 333 783C217.819 783 131.503 723.472 77.3135 646.13C24.6818 571.012 0 477.038 0 391.5C0 175.281 175.281 0 391.5 0C607.719 0 783 175.281 783 391.5Z"
/>
<div class="boot-splash-content">
<div class="boot-splash-mark">
<svg
class="boot-splash-base"
viewBox="-2 79 235 180"
fill="currentColor"
aria-hidden="true"
>
<path
d="M1057.5 600.5C1070.75 600.5 1081.5 611.245 1081.5 624.5V759.5C1081.5 772.755 1070.75 783.5 1057.5 783.5H922.5C909.245 783.5 898.5 772.755 898.5 759.5V624.5C898.5 611.245 909.245 600.5 922.5 600.5H1057.5Z"
d="M18.1625 149.721C31.7585 138.071 50.2802 135.096 70.2299 140.442C85.7141 144.592 96.5945 153.887 104.637 163.586C107.515 167.056 110.192 170.797 112.669 174.541C113.465 170.055 113.905 165.137 113.905 159.76C113.905 143.781 111.862 135.005 109.565 130.209C107.772 126.465 105.679 124.694 101.932 123.308C97.067 121.509 89.6875 120.561 77.7162 120.414C64.807 120.255 53.3089 120.879 35.1342 120.879V80.8786C49.4279 80.8786 66.5105 80.2725 78.2084 80.4167C90.8439 80.5725 104.099 81.4613 115.809 85.7927C128.638 90.5378 139.061 99.1923 145.641 112.931C151.717 125.618 153.905 141.381 153.905 159.76C153.905 180.288 149.3 198.446 140.772 213.409C144.143 215.498 147.711 216.391 152 216.391V256.391C135.341 256.391 122.811 250.627 113.12 242.718C98.8789 251.856 82.2137 256.391 65.0532 256.391C21.9673 256.391 0.110005 221.954 0.000425813 192.082C-0.0544308 177.123 5.1868 160.84 18.1625 149.721ZM59.8764 179.08C49.6362 176.336 45.5919 178.894 44.1899 180.095C42.168 181.828 39.9776 185.714 40.0004 191.935C40.0463 204.424 48.3803 216.391 65.0532 216.391C73.6167 216.391 81.4305 214.507 88.1391 211.007C82.7097 201.967 78.7316 195.009 73.8471 189.119C69.1238 183.423 64.8159 180.404 59.8764 179.08Z"
/>
<rect x="166.49" y="221.65" width="64.37" height="35.46" rx="6" />
</svg>
<div class="boot-splash-highlight" aria-hidden="true">
<svg viewBox="-2 79 235 180" fill="currentColor">
<path
d="M18.1625 149.721C31.7585 138.071 50.2802 135.096 70.2299 140.442C85.7141 144.592 96.5945 153.887 104.637 163.586C107.515 167.056 110.192 170.797 112.669 174.541C113.465 170.055 113.905 165.137 113.905 159.76C113.905 143.781 111.862 135.005 109.565 130.209C107.772 126.465 105.679 124.694 101.932 123.308C97.067 121.509 89.6875 120.561 77.7162 120.414C64.807 120.255 53.3089 120.879 35.1342 120.879V80.8786C49.4279 80.8786 66.5105 80.2725 78.2084 80.4167C90.8439 80.5725 104.099 81.4613 115.809 85.7927C128.638 90.5378 139.061 99.1923 145.641 112.931C151.717 125.618 153.905 141.381 153.905 159.76C153.905 180.288 149.3 198.446 140.772 213.409C144.143 215.498 147.711 216.391 152 216.391V256.391C135.341 256.391 122.811 250.627 113.12 242.718C98.8789 251.856 82.2137 256.391 65.0532 256.391C21.9673 256.391 0.110005 221.954 0.000425813 192.082C-0.0544308 177.123 5.1868 160.84 18.1625 149.721ZM59.8764 179.08C49.6362 176.336 45.5919 178.894 44.1899 180.095C42.168 181.828 39.9776 185.714 40.0004 191.935C40.0463 204.424 48.3803 216.391 65.0532 216.391C73.6167 216.391 81.4305 214.507 88.1391 211.007C82.7097 201.967 78.7316 195.009 73.8471 189.119C69.1238 183.423 64.8159 180.404 59.8764 179.08Z"
/>
<rect
x="166.49"
y="221.65"
width="64.37"
height="35.46"
rx="6"
/>
</svg>
</div>
</div>
<p class="boot-splash-detail">
Loading Anarlog. This is taking longer than expected.
</p>
</div>
</div>
<div id="root"></div>
Expand Down
6 changes: 3 additions & 3 deletions apps/desktop/src-tauri/icons/src/stable.icon/Assets/SVG Image 5.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions apps/desktop/src-tauri/icons/src/stable.icon/Assets/SVG Image.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion apps/desktop/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ export const Route = createRootRouteWithContext<Partial<Context>>()({

function Component() {
return (
<Suspense fallback={<BrandLoadingView />}>
<Suspense
fallback={
<BrandLoadingView detail="Loading your workspace. This should only take a moment." />
}
>
<MainAppLayout />
</Suspense>
);
Expand Down
15 changes: 15 additions & 0 deletions apps/desktop/src/shared/anarlog-mark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const ANARLOG_MARK_VIEW_BOX = "-2 79 235 180";

export function AnarlogMark({ className }: { className?: string }) {
return (
<svg
viewBox={ANARLOG_MARK_VIEW_BOX}
fill="currentColor"
className={className}
aria-hidden="true"
>
<path d="M18.1625 149.721C31.7585 138.071 50.2802 135.096 70.2299 140.442C85.7141 144.592 96.5945 153.887 104.637 163.586C107.515 167.056 110.192 170.797 112.669 174.541C113.465 170.055 113.905 165.137 113.905 159.76C113.905 143.781 111.862 135.005 109.565 130.209C107.772 126.465 105.679 124.694 101.932 123.308C97.067 121.509 89.6875 120.561 77.7162 120.414C64.807 120.255 53.3089 120.879 35.1342 120.879V80.8786C49.4279 80.8786 66.5105 80.2725 78.2084 80.4167C90.8439 80.5725 104.099 81.4613 115.809 85.7927C128.638 90.5378 139.061 99.1923 145.641 112.931C151.717 125.618 153.905 141.381 153.905 159.76C153.905 180.288 149.3 198.446 140.772 213.409C144.143 215.498 147.711 216.391 152 216.391V256.391C135.341 256.391 122.811 250.627 113.12 242.718C98.8789 251.856 82.2137 256.391 65.0532 256.391C21.9673 256.391 0.110005 221.954 0.000425813 192.082C-0.0544308 177.123 5.1868 160.84 18.1625 149.721ZM59.8764 179.08C49.6362 176.336 45.5919 178.894 44.1899 180.095C42.168 181.828 39.9776 185.714 40.0004 191.935C40.0463 204.424 48.3803 216.391 65.0532 216.391C73.6167 216.391 81.4305 214.507 88.1391 211.007C82.7097 201.967 78.7316 195.009 73.8471 189.119C69.1238 183.423 64.8159 180.404 59.8764 179.08Z" />
<rect x="166.49" y="221.65" width="64.37" height="35.46" rx="6" />
</svg>
);
}
15 changes: 13 additions & 2 deletions apps/desktop/src/shared/brand-loading-view.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,21 @@ import { BrandLoadingView } from "./brand-loading-view";
describe("BrandLoadingView", () => {
afterEach(cleanup);

it("shows a branded loading status with the mark", () => {
it("shows the anarlog mark while loading", () => {
render(<BrandLoadingView />);

const status = screen.getByRole("status", { name: "Loading" });
expect(status.querySelector("svg")).toBeTruthy();
expect(status.querySelectorAll("svg")).toHaveLength(2);
expect(screen.queryByText(/Updating your data/)).toBeNull();
});

it("shows optional loading detail", () => {
render(
<BrandLoadingView detail="Updating your data. This may take a few minutes." />,
);

expect(
screen.getByText("Updating your data. This may take a few minutes."),
).toBeTruthy();
});
});
59 changes: 27 additions & 32 deletions apps/desktop/src/shared/brand-loading-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@
import { cn } from "@anlg/utils";

export function AnarlogMark({ className }: { className?: string }) {
return (
<svg
viewBox="0 0 1082 784"
fill="currentColor"
className={className}
aria-hidden="true"
>
<path d="M600 391.5C600 276.349 506.651 183 391.5 183C276.349 183 183 276.349 183 391.5C183 444.961 199.068 500.988 227.187 541.12C253.747 579.028 288.181 600 333 600C417.378 600 486.223 527.628 495.045 418.497C496.113 405.286 506.745 394.509 520 394.509H596.985C598.648 394.509 600 393.163 600 391.5ZM783 391.5C783 454.618 781.537 512.253 795.278 556.615C801.439 576.506 808.593 585.812 813.92 590.27C816.268 592.234 820.533 595.241 828.701 597.392C841.519 600.767 852.5 610.745 852.5 624V759C852.5 772.255 841.734 783.114 828.52 782.074C777.88 778.088 733.031 761.198 696.486 730.621C672.723 710.738 655.202 687.348 642.198 663.186C632.309 644.812 603.663 641.741 590.781 658.157C532.985 731.805 446.926 783 333 783C217.819 783 131.503 723.472 77.3135 646.13C24.6818 571.012 0 477.038 0 391.5C0 175.281 175.281 0 391.5 0C607.719 0 783 175.281 783 391.5Z" />
<path d="M1057.5 600.5C1070.75 600.5 1081.5 611.245 1081.5 624.5V759.5C1081.5 772.755 1070.75 783.5 1057.5 783.5H922.5C909.245 783.5 898.5 772.755 898.5 759.5V624.5C898.5 611.245 909.245 600.5 922.5 600.5H1057.5Z" />
</svg>
);
}
import { AnarlogMark } from "./anarlog-mark";

export function BrandLoadingView() {
export function BrandLoadingView({ detail }: { detail?: string }) {
return (
<div
role="status"
Expand All @@ -24,29 +12,36 @@ export function BrandLoadingView() {
"bg-background flex h-screen w-screen items-center justify-center",
])}
>
<div
className={cn([
"relative w-[4.5rem]",
"drop-shadow-[0_10px_24px_rgba(0,0,0,0.10)]",
"dark:drop-shadow-[0_12px_28px_rgba(0,0,0,0.45)]",
])}
>
<AnarlogMark className="text-foreground/20 w-full" />
<div className="flex flex-col items-center">
<div
aria-hidden="true"
className={cn([
"pointer-events-none absolute inset-0",
"text-foreground/75 dark:text-foreground/50",
"[-webkit-mask-image:linear-gradient(105deg,transparent_36%,#000_50%,transparent_64%)]",
"[mask-image:linear-gradient(105deg,transparent_36%,#000_50%,transparent_64%)]",
"[-webkit-mask-size:220%_100%]",
"[mask-size:220%_100%]",
"animate-logo-shimmer-sweep",
"motion-reduce:animate-none motion-reduce:opacity-0",
"relative w-[4.5rem]",
"drop-shadow-[0_10px_24px_rgba(0,0,0,0.10)]",
"dark:drop-shadow-[0_12px_28px_rgba(0,0,0,0.45)]",
])}
>
<AnarlogMark className="w-full" />
<AnarlogMark className="text-foreground/20 w-full" />
<div
aria-hidden="true"
className={cn([
"pointer-events-none absolute inset-0",
"text-foreground/75 dark:text-foreground/50",
"[-webkit-mask-image:linear-gradient(105deg,transparent_36%,#000_50%,transparent_64%)]",
"[mask-image:linear-gradient(105deg,transparent_36%,#000_50%,transparent_64%)]",
"[-webkit-mask-size:220%_100%]",
"[mask-size:220%_100%]",
"animate-logo-shimmer-sweep",
"motion-reduce:animate-none motion-reduce:opacity-0",
])}
>
<AnarlogMark className="w-full" />
</div>
</div>
{detail ? (
<p className="text-muted-foreground mt-5 max-w-64 text-center text-xs">
{detail}
</p>
) : null}
</div>
</div>
);
Expand Down
Loading
Loading