From 4edaf628f116496df87d0e62cc70f60cc7e62eb7 Mon Sep 17 00:00:00 2001 From: Simon Hyll Date: Wed, 1 May 2024 23:48:44 +0200 Subject: [PATCH] feat: added a splashscreen lab --- src/content/docs/learn/index.mdx | 13 +++++ src/content/docs/learn/splashscreen.mdx | 65 ++++++++++++++++++++++++- src/styles/custom.css | 11 +++-- 3 files changed, 83 insertions(+), 6 deletions(-) diff --git a/src/content/docs/learn/index.mdx b/src/content/docs/learn/index.mdx index 917aec53cca..55ae1eb973b 100644 --- a/src/content/docs/learn/index.mdx +++ b/src/content/docs/learn/index.mdx @@ -11,3 +11,16 @@ sidebar: import Stub from '@components/Stub.astro'; + +## Create lab apps + +Each lab assumes you've created a fresh new app for each of them. That doesn't necessarily have to be +the case, you can certainly experiment using your own app, or using different options than what the +lab assumes, but we strongly recommend you set up a new app for each lab so that it becomes as easy +as possible to follow along. + +```sh +# Create a new app using CTA +npx create-tauri-app --beta --mobile +# Spam hit "Enter" to get all defaults +``` diff --git a/src/content/docs/learn/splashscreen.mdx b/src/content/docs/learn/splashscreen.mdx index 90922265a9d..eb942dba7de 100644 --- a/src/content/docs/learn/splashscreen.mdx +++ b/src/content/docs/learn/splashscreen.mdx @@ -6,6 +6,67 @@ sidebar: variant: caution --- -import Stub from '@components/Stub.astro'; +import { Steps } from '@astrojs/starlight/components'; - +In this lab we'll be implementing a basic splashscreen functionality in a Tauri app. Doing so +is quite straight forward, a splashscreen is effectively just a matter of creating a new window +that displays some contents during the period your app is doing some heavy setup related tasks. + +## Prerequisites + +- [A basic development environment setup](/start/prerequisites) +- [Create a new lab app](/learn#create-lab-apps) + +## Steps + + + +1. **Register new windows in `tauri.conf.json`** + + The easiest way of adding new windows is by adding them directly to `tauri.conf.json`. You can also create them dynamically at startup, + but for the sake of simplicity lets just register them instead. + +2. **Create a new page to host your splashscreen** + + Before you begin you'll need to have some content to show. How you develop new pages depend on your chosen framework, + most have the concept of a "router" that handles page navigation which should work just like normal in Tauri in which case + you just create a new splashscreen page. Or as we're going to be doing here, create a new `splashscreen.html` file to host + the contents. + + All that's important here is that you can navigate to a `/splashscreen` URL and be shown the contents you want for your + splashscreen. + +3. **Open your main window in hidden mode** + + Splashscreens are primarily used to hide loading times, so it makes sense to show your main window so that its contents can + be loaded. Additionally, for apps that are more frontend heavy, this is how you'd get your JS based setup scripts to run. + +4. **Perform some heavy setup task in the backend** + + Perform some heavy setup functions in the `.setup(|app| {})` hook, then store its readiness in a `State`. We do this because + it lets us perform work in both the frontend and the backend before the splashscreen is closed. + +5. **Create a command to determine if setup is complete** + + Using a custom Tauri command we can synchronize our frontend and backend related setup tasks to determine if everything we + expect to be done is in fact so, after which we can close the splashscreen and unhide the main window. + +6. **Close the splashscreen window** + + + +## Discuss + +**Should you have a splashscreen?** + +In general having a splashscreen is an admittance of defeat that you couldn't make your +app load fast enough to not need one. In fact it tends to be better to just go straight +to a main window that then shows some little spinner somewhere in a corner informing the +user there's still setup tasks happening in the background. + +However, with that said, it can be a stylistic choice that you want to have a splashscreen, +or you might have some very particular requirement that makes it impossible to even start the +app until some tasks are performed. It's definitely not *wrong* to have a splashscreen, it +just tends to not be necessary and can make users feel like the app isn't very well optimized. + +**** diff --git a/src/styles/custom.css b/src/styles/custom.css index bc69499ee9e..02f97cd63ce 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -118,7 +118,7 @@ } /* Tauri logo on index page */ -.hero > img { +.hero>img { animation: 3s intro; opacity: 0.4; } @@ -127,7 +127,7 @@ display: inline-block; } -html[data-theme='light'] .hero > img { +html[data-theme='light'] .hero>img { filter: invert(1); } @@ -141,8 +141,7 @@ html[data-theme='light'] .hero > img { scale: 0.9; } - 100% { - } + 100% {} } @media (prefers-reduced-motion) { @@ -150,3 +149,7 @@ html[data-theme='light'] .hero > img { transition: none !important; } } + +.sl-steps>li>a:first-of-type { + text-decoration: none; +} \ No newline at end of file