From 33547e0d77b931612ee6e2addfee80a3f1697598 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 29 Jun 2020 11:20:57 +0200
Subject: [PATCH 1/4] Add defer to apploader script

---
 gulpfile.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/gulpfile.js b/gulpfile.js
index 84f4558e6a..8b407ec2aa 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -184,7 +184,12 @@ function copy(query) {
 function injectBundle() {
     return src(options.injectBundle.query, { base: './src/' })
         .pipe(inject(
-            src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), { relative: true }
+            src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), {
+                relative: true,
+                transform: function (filepath) {
+                    return `<script src="${filepath}" defer></script>`;
+                }
+            }
         ))
         .pipe(dest('dist/'))
         .pipe(browserSync.stream());

From 3fcb8ed00ef28d3870fad748f9fce4386a20b3f8 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 29 Jun 2020 11:21:20 +0200
Subject: [PATCH 2/4] Add splash screen during app load

---
 src/index.html | 45 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index ed63ca1a98..d52be4346e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -52,7 +52,7 @@
     <!-- iPad Pro 1 -->
     <link href="assets/splash/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="assets/splash/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
-    
+
     <!-- iPad Pro 3 -->
     <link href="assets/splash/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="assets/splash/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
@@ -69,12 +69,19 @@
     <title>Jellyfin</title>
 
     <style>
-        .transparentDocument, .backgroundContainer-transparent:not(.withBackdrop) {
+        .transparentDocument,
+        .backgroundContainer-transparent:not(.withBackdrop) {
             background: none !important;
             background-color: transparent !important;
         }
 
-        .mouseIdle, .mouseIdle button, .mouseIdle select, .mouseIdle input, .mouseIdle textarea, .mouseIdle a, .mouseIdle label {
+        .mouseIdle,
+        .mouseIdle button,
+        .mouseIdle select,
+        .mouseIdle input,
+        .mouseIdle textarea,
+        .mouseIdle a,
+        .mouseIdle label {
             cursor: none !important;
         }
 
@@ -82,7 +89,9 @@
             background-color: #101010;
         }
 
-        .hide, .mouseIdle .hide-mouse-idle, .mouseIdle-tv .hide-mouse-idle-tv {
+        .hide,
+        .mouseIdle .hide-mouse-idle,
+        .mouseIdle-tv .hide-mouse-idle-tv {
             display: none !important;
         }
 
@@ -94,6 +103,30 @@
             z-index: 1;
             width: 0.8em;
         }
+
+        @keyframes fadein {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        .splashLogo {
+            animation: fadein 0.5s;
+            width: 30%;
+            height: 30%;
+            background-image: url(assets/img/banner-light.png);
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     </style>
 </head>
 <body>
@@ -103,7 +136,9 @@
         <div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
     </div>
     <div class="skinHeader focuscontainer-x"></div>
-    <div class="mainAnimatedPages skinBody"></div>
+    <div class="mainAnimatedPages skinBody">
+        <div class="splashLogo"></div>
+    </div>
     <div class="mainDrawerHandle"></div>
 
     <!-- inject:js -->

From 783d4764482e52268c07ea94a5d954efbb004dba Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 29 Jun 2020 11:48:55 +0200
Subject: [PATCH 3/4] Add async to scripts injected by appLoader

---
 src/scripts/apploader.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/apploader.js b/src/scripts/apploader.js
index 0353c9535c..183b765d16 100644
--- a/src/scripts/apploader.js
+++ b/src/scripts/apploader.js
@@ -11,6 +11,7 @@
             src += `?v=${self.dashboardVersion}`;
         }
         script.src = src;
+        script.setAttribute('async', '');
 
         if (onload) {
             script.onload = onload;

From f6fc874ebe453b0c86b7443794f62975734217e4 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Tue, 30 Jun 2020 22:16:32 +0200
Subject: [PATCH 4/4] Prefix splash properties

---
 src/index.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/index.html b/src/index.html
index d52be4346e..f8d867cb1a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -104,6 +104,16 @@
             width: 0.8em;
         }
 
+        @-webkit-keyframes fadein {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
         @keyframes fadein {
             from {
                 opacity: 0;
@@ -115,6 +125,7 @@
         }
 
         .splashLogo {
+            -webkit-animation: fadein 0.5s;
             animation: fadein 0.5s;
             width: 30%;
             height: 30%;
@@ -125,6 +136,7 @@
             position: fixed;
             top: 50%;
             left: 50%;
+            -webkit-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
         }
     </style>