tauri-splashscreen_skill

This skill guides you through adding a Tauri splashscreen and startup sequence, configuring windows, frontend and backend init, and styling for a polished

12

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill dchuk/claude-code-tauri-skills --skill tauri-splashscreen

SKILL.md11.3 KB

Overview

This skill guides you through adding a Tauri v2 splashscreen (startup/loading screen) to your application. It covers window configuration, creating custom splash HTML/CSS, wiring frontend/backend signaling to close the splash, and styling variations. The goal is a smooth startup experience that hides the main window until initialization is complete.

How this skill works

You create a small splash window (splashscreen.html) and configure the main window as hidden in the Tauri config. The frontend signals readiness via an invoke command and the Rust backend tracks tasks (frontend/backend). When all tasks are complete the backend closes the splash window and shows the main window. Optional async backend work must use tokio::time::sleep to avoid blocking the runtime.

When to use it

When you need a branded loading screen during app startup
If the app performs heavy frontend or backend initialization
To hide uninitialized UI while services or databases connect
When you want a simple progress or animated intro without blocking the main window
For consistent cross-platform startup presentation (desktop)

Best practices

Set main window visible:false in the Tauri config to prevent early display
Match window labels in config and code exactly (e.g., "main", "splashscreen")
Use asynchronous backend tasks with tokio::time::sleep instead of blocking threads
Keep splash duration short—aim for 1–3 seconds minimum for perceived responsiveness
Make transparent windows work by setting html/body background: transparent in splash HTML
Handle initialization errors by showing main window with an error state rather than leaving the app hidden

Example use cases

Branded app that needs to load config, DB, and assets before showing UI
App that initializes background services and should only show UI after successful connections
Simple apps that only need frontend readiness and can close splash via a single command
Apps that want different visual styles: minimal, progress bar, or glowing dark theme
Desktop-only projects where a custom HTML/CSS splash improves perceived speed

FAQ

Have frontend and backend call the same backend command (e.g., set_complete) that toggles state; when both flags are true the backend closes the splash and shows the main window.

Why use tokio::time::sleep instead of std::thread::sleep?

std::thread::sleep blocks the async runtime and stalls other tasks. tokio::time::sleep yields properly in async code so initialization can run without freezing the app.