IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Introduces a splash screen behind a hidden site setting (#17094)

Browse Source 
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
This commit is contained in:
Joe
2022-06-22 04:35:46 +08:00
committed by GitHub
parent 624c684d51
commit e82a2ce9ae
11 changed files with 209 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/app.js
View File

@@ -52,6 +52,9 @@ const Discourse = Application.extend({
start() {
document.querySelector("noscript")?.remove();
// The app booted. Remove the splash screen
document.querySelector("#d-splash")?.remove();
if (Error.stackTraceLimit) {
// We need Errors to have full stack traces for `lib/source-identifier`
Error.stackTraceLimit = Infinity;

59
app/assets/stylesheets/d_splash.scss Normal file
View File

@@ -0,0 +1,59 @@
html {
background: var(--secondary);
// needed because this sheet loads early and we want no scroll bars until
// the splash is removed.
overflow: hidden !important;
}
#d-splash {
display: grid;
place-items: center;
position: relative;
backface-visibility: hidden;
.preloader-image {
max-width: 100%;
height: 100vh;
object-fit: none;
}
.preloader-text {
padding-top: 5em;
position: absolute;
display: grid;
grid-auto-flow: column;
place-items: center;
&:after {
animation: loading-text 3s infinite;
content: "";
position: absolute;
top: 5em;
margin: 0 0.1em;
left: 100%;
// TODO: this needs R2 RTL magic
.rtl & {
left: 0;
right: 100%;
}
}
}
}
@keyframes loading-text {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
}

5
app/helpers/application_helper.rb
View File

@@ -429,6 +429,11 @@ module ApplicationHelper
", app-argument=discourse://new?siteUrl=#{Discourse.base_url}" : ""
end
def include_splash_screen?
# A bit basic for now but will be expanded later
SiteSetting.splash_screen
end
def allow_plugins?
!request.env[ApplicationController::NO_PLUGINS]
end

17
app/views/common/_discourse_splash.html.erb Normal file
View File

@@ -0,0 +1,17 @@
<%- unless customization_disabled? %>
<section id="d-splash">
<%= discourse_stylesheet_link_tag 'd_splash', theme_id: nil %>
<img
class="preloader-image"
src="/images/preloader.svg"
alt="<%=SiteSetting.title%>"
>
<div class="preloader-text">
<span>
<%= I18n.t("js.preloader_text") %>
</span>
</div>
</section>
<%- end %>

8
app/views/layouts/application.html.erb
View File

@@ -9,6 +9,10 @@
<%= render partial: "layouts/head" %>
<%= discourse_csrf_tags %>
<%- if include_splash_screen? %>
<link rel="preload" as="image" href="/images/preloader.svg">
<%- end %>
<%- if SiteSetting.enable_escaped_fragments? %>
<meta name="fragment" content="!">
<%- end %>
@@ -70,6 +74,10 @@
</head>
<body class="<%= body_classes %>">
<%- if include_splash_screen? %>
<%= render partial: "common/discourse_splash" %>
<%- end %>
<discourse-assets>
<discourse-assets-stylesheets>
<%= render partial: "common/discourse_stylesheet" %>