slash/slash-desktop
4
0
Fork 0
Code Issues 2 Pull requests 1 Projects Releases 1 Packages Wiki Activity Actions

fix(branding): replace Mattermost compass loading spinner with Slash badge #17

Merged
mohlec merged 1 commit from fix/loading-screen-branding into slash/main 2026-07-16 19:03:09 +00:00
Conversation 0 Commits 1 Files changed 1 +35 -154
mohlec commented 2026-07-16 18:39:01 +00:00
Owner
Copy link

Fixes the desktop app's startup/loading screen showing Mattermost's compass-needle logo (the same issue already fixed on the web version in slash-server commit 16ff32457).

What changed

LoadingIcon.tsx drew the Mattermost compass via masked/gradient SVG shapes. Replaced with:

  • A plain rotating ring (reuses the existing generic .LoadingAnimation__spinner class/keyframe -- not compass-specific)
  • The same ~8KB Slash badge PNG used on the web loading screen, embedded inline

Important difference from the webapp fix

The webapp's fix could drop the .LoadingAnimation__compass class entirely because its cleanup logic (plain JS, initial_loading_screen_class.ts) proceeds on either of two animationend events.

This component's React state machine (LoadingAnimation.tsx) only transitions to the LOADED state after LoadingAnimation__compass-shrink specifically fires -- and CSS only ever applies that animation to an element with class LoadingAnimation__compass. So that class is kept (now wrapping the badge image instead of the needle/base paths) -- dropping it would leave the loading screen stuck on-screen forever.

No CSS colour changes needed -- LoadingAnimation.scss already uses var(--center-channel-color), not a hardcoded Mattermost blue like the webapp version had.

Branding gate passes.

Fixes the desktop app's startup/loading screen showing Mattermost's compass-needle logo (the same issue already fixed on the web version in slash-server commit 16ff32457). ## What changed `LoadingIcon.tsx` drew the Mattermost compass via masked/gradient SVG shapes. Replaced with: - A plain rotating ring (reuses the existing generic `.LoadingAnimation__spinner` class/keyframe -- not compass-specific) - The same ~8KB Slash badge PNG used on the web loading screen, embedded inline ## Important difference from the webapp fix The webapp's fix could drop the `.LoadingAnimation__compass` class entirely because its cleanup logic (plain JS, `initial_loading_screen_class.ts`) proceeds on **either** of two animationend events. This component's React state machine (`LoadingAnimation.tsx`) only transitions to the LOADED state after `LoadingAnimation__compass-shrink` specifically fires -- and CSS only ever applies that animation to an element with class `LoadingAnimation__compass`. So that class is kept (now wrapping the badge image instead of the needle/base paths) -- dropping it would leave the loading screen stuck on-screen forever. No CSS colour changes needed -- `LoadingAnimation.scss` already uses `var(--center-channel-color)`, not a hardcoded Mattermost blue like the webapp version had. Branding gate passes.
fix(branding): replace Mattermost compass loading spinner with Slash badge
All checks were successful
Build Slash Desktop / build-macos (pull_request) Successful in 1m12s
Details
Build Slash Desktop / build-windows (pull_request) Successful in 4m50s
Details
Build Slash Desktop / build-linux (pull_request) Successful in 6m17s
Details
8423fc0519 
The desktop app's startup/loading screen (LoadingScreen -> LoadingAnimation ->
LoadingIcon) drew Mattermost's compass-needle logo via masked/gradient SVG
shapes -- the last remaining unbranded surface after the webapp equivalent was
fixed (slash-server commit 16ff32457).

Same approach as that fix: replace the masked compass artwork with a plain
rotating ring (reuses .LoadingAnimation__spinner, the existing generic
class/keyframe -- not compass-specific) plus the same ~8KB Slash badge PNG
embedded inline.

IMPORTANT DIFFERENCE FROM THE WEBAPP FIX: that version could drop the
.LoadingAnimation__compass class entirely because its cleanup (plain
initial_loading_screen_class.ts) proceeds on EITHER of two animationend
events. This component's React state machine (LoadingAnimation.tsx) only
progresses to the LOADED state after 'LoadingAnimation__compass-shrink'
specifically fires, which CSS only ever applies to .LoadingAnimation__compass
-- so an element with that class is kept (now wrapping the badge image
instead of the needle/base paths) to avoid a loading screen that never
disappears.

Colours needed no change here -- LoadingAnimation.scss already uses
var(--center-channel-color), not a hardcoded Mattermost blue like the webapp
version had.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
mohlec merged commit 71c8d1820b into slash/main 2026-07-16 19:03:09 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
slash/slash-desktop!17
No description provided.