From 97adff267f087d4bec0fa4650f0f12ab3f3f73ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Aug 2025 16:45:24 +0300
Subject: [PATCH] delay splash screen, only show if loading takes too long

---
 index.html               | 2 +-
 public/static/splash.css | 7 +++++++
 src/App.scss             | 7 +------
 src/main.js              | 1 +
 4 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index fb92252c5..26eeee19b 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
   </head>
   <body>
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="splash">
+    <div id="splash" class="initial-hidden">
       <!-- we are hiding entire graphic so no point showing credit -->
       <div aria-hidden="true" id="splash-credit">
         Art by pipivovott
diff --git a/public/static/splash.css b/public/static/splash.css
index abdc19fc2..c6f6832b9 100644
--- a/public/static/splash.css
+++ b/public/static/splash.css
@@ -21,6 +21,13 @@ body {
   position: absolute;
   z-index: 9999;
   font-size: calc(1vw + 1vh + 1vmin);
+  opacity: 1;
+  transition: opacity 500ms ease-out 0.5s;
+}
+
+#splash.hidden,
+#splash.initial-hidden {
+  opacity: 0;
 }
 
 #splash-credit {
diff --git a/src/App.scss b/src/App.scss
index 51f2c9af3..78a3494c7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -929,12 +929,7 @@ option {
 
 #splash {
   pointer-events: none;
-  transition: opacity 0.5s;
-  opacity: 1;
-
-  &.hidden {
-    opacity: 0;
-  }
+  // transition: opacity 0.5s;
 
   #status {
     &.css-ok {
diff --git a/src/main.js b/src/main.js
index 4654679b8..1cd1afe6c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -80,6 +80,7 @@ const persistedStateOptions = {
       console.error('Storage error', e)
       storageError = e
     }
+    document.querySelector('#splash').classList.remove('initial-hidden')
     document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}_small.webp`
     document.querySelector('#status').removeAttribute('class')
     document.querySelector('#status').textContent = i18n.global.t('splash.loading')
