Commit Graph

15 Commits

Author SHA1 Message Date
Joe 2750049333
UX: Makes splash dots use theme colors (#17388)
The dots in the splash were previously hard-coded (v1). This PR makes progress towards making them be based on current theme colors.

Note that this is an improvement and not the "final" version. We're going to dynamically generate the splash file and the base64 URL later on.
2022-07-08 22:30:59 +08:00
Joe 02286186c3
UX: Splash should always stick to top left corner of the viewport (#17348)
No visual changes.

This commit only fixes some display issues on some browsers that don't respect the defaults.
2022-07-06 06:33:09 +08:00
Joe fbc1bc4255
UX: Prevent overlap between splash loader and splash text on some browsers take 2 (#17341)
Same as #17340

context: https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/23?u=johani

No visual changes, just a fix for more situations where the overlap happens.
2022-07-06 00:35:55 +08:00
Joe 4acf2394e6
UX: Prevent overlap between splash loader and splash text on some browsers (#17340)
Context: https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/23?u=johani

Not all browsers respect padding on absolute elements.

There are no visual/function changes. This PR just changes the implementation to prevent the overlap on some browsers.
2022-07-05 22:41:43 +08:00
Joe adb7fa5e2f
UX: Use discourse-ready as a baseline for removing the splash (#17297)
We previously used the window load event as a target to remove the splash. The issue with that is that it means we wait for images to download before we remove the splash.

Ember has a better method that we can use ready(). This PR triggers a custom discourse-ready when that happens and uses that as the baseline for removing the splash.

This PR also adds three new performance marks. discourse-ready, discourse-splash-visible, and discourse-splash-removed

These will help us keep track of performance.

Internal topic /t/65378/81
2022-07-01 21:54:38 +08:00
Joe 49905a4e6c
DEV: Use performance timings to as a baseline for the splash take 2 (#17284)
We previously relied on CSS animation-delay for the splash. This means that we can get inconsistent results based on device/network conditions.

This PR moves us to a more consistent timing based on {request time + 2 seconds}

Internal topic: /t/65378/65
2022-06-30 21:22:00 +08:00
Joe c86c709998
UX: Reduces splash animation delay (#17282)
This PR cuts down the delay before the splash screen is visible.
2022-06-30 17:19:39 +08:00
Joffrey JAFFEUX 657256a099
Revert "DEV: Use `performance.timing` as a baseline for the splash (#17275)" (#17276)
This reverts commit 6146da5eb7.
2022-06-29 18:34:37 +08:00
Joe 6146da5eb7
DEV: Use `performance.timing` as a baseline for the splash (#17275)
* update styles

* remove unused code

* use request time as a baseline
2022-06-29 20:01:46 +10:00
Joe 526115f11a
FIX: Defer removing the splash screen until the window load event fires take 3 (#17238)
We currently remove the splash screen once Discourse starts booting.

This can be an issue on very slow devices, which can take up to 6 seconds. This PR ensures that we don't remove the splash until the browser has finished parsing all of the site's assets. It won't impact fast devices.

Internal topic /t/65378/60
2022-06-25 12:59:16 +08:00
Joe e993a23a54
FIX: Remove splash screen in no-js view take 2 (#17229)
We use javascript to remove the splash screen when the site boots up. If the user has js disabled, they get stuck on the splash screen.

If the user has js disabled. We don't show the splash screen at all.
2022-06-24 17:38:42 +08:00
Joe 07cb8e5300
FIX: Reverts #17225 & #17223 (#17228)
* Revert "FIX: Defer removing the splash screen until the window load event fires (#17225)"

This reverts commit 6a61e855b3.

* Revert "FIX: Remove splash screen in no-js view (#17223)"

This reverts commit 5257cae1b8.
2022-06-24 15:59:27 +10:00
Joe 5257cae1b8
FIX: Remove splash screen in no-js view (#17223)
We use javascript to remove the splash screen when the site boots up. If the user has js disabled, they get stuck on the splash screen.

If the user has js disabled. We don't show the splash screen at all.
2022-06-24 09:25:10 +08:00
Joe 293323af38
UX: Splash screen v1 improvements (#17214)
This commit does six things

* changes the animation for the splash screen. To a more subtle animation.
* defers displaying the splash by 1.5 seconds
* defers displaying the splash "loading" text by 2.5 seconds
* defers removing the splash until all Discourse initializers have run
* fixes a display issue in Firefox
* Inlines the SVG as a base64 and inlines the required CSS.

The encoded SVG is hard coded for now, but we will use a helper to generate that based on the file after some testing.
2022-06-23 14:07:04 +08:00
Joe e82a2ce9ae
UX: Introduces a splash screen behind a hidden site setting (#17094)
This PR introduces a new hidden site setting that allows admins to display a splash screen while site assets load.

The splash screen can be enabled via the `splash_screen` hidden site setting.

This is what the splash screen currently looks like

5ceb72f085.mp4

Once site assets load, the splash screen is automatically removed.

To control the loading text that shows in the splash screen, you can change the preloader_text translation string in admin > customize > text
2022-06-22 04:35:46 +08:00