Better hide spinner (#2990)

Fix https://github.com/FreshRSS/FreshRSS/issues/2986#issuecomment-631396735
By CSS, and also by JS
https://framagit.org/nicofrand/xextension-threepanesview/-/issues/10

3 files changed, 40 insertions, 6 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 12d500785..83c806040 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1526,6 +1526,13 @@ function faviconNbUnread(n) {
 	}
 }
 
+function removeFirstLoadSpinner() {
+	const first_load = document.getElementById('first_load');
+	if (first_load) {
+		first_load.remove();
+	}
+}
+
 function init_normal() {
 	const stream = document.getElementById('stream');
 	if (!stream) {
@@ -1556,6 +1563,7 @@ function init_beforeDOM() {
 }
 
 function init_afterDOM() {
+	removeFirstLoadSpinner();
 	init_notifications();
 	init_popup();
 	init_confirm_action();
@@ -1579,11 +1587,9 @@ init_beforeDOM();	//Can be called before DOM is fully loaded
 if (document.readyState && document.readyState !== 'loading') {
 	init_afterDOM();
 } else {
-	document.addEventListener('DOMContentLoaded', function () {
-			if (window.console) {
-				console.log('FreshRSS waiting for DOMContentLoaded…');
-			}
-			init_afterDOM();
-		}, false);
+	if (window.console) {
+		console.log('FreshRSS waiting for DOMContentLoaded…');
+	}
+	document.addEventListener('DOMContentLoaded', init_afterDOM, false);
 }
 // @license-end
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index fefc57650..1c9635469 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -15,6 +15,7 @@
 html, body {
 	margin: 0;
 	padding: 0;
+	background: white;
 	font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
 	font-size: 100%;
 }
@@ -591,12 +592,17 @@ input[type="search"] {
 
 /*=== Body */
 #global {
+	background: inherit;
 	display: table;
 	width: 100%;
 	height: 100%;
 	table-layout: fixed;
 }
 
+#stream {
+	background: inherit;
+}
+
 .aside {
 	display: table-cell;
 	width: 300px;
@@ -653,6 +659,10 @@ input[type="search"] {
 }
 
 /*=== Day indication */
+.day {
+	background: inherit;
+}
+
 .day .name {
 	position: absolute;
 	right: 0;
@@ -1164,6 +1174,10 @@ input:checked + .slide-container .properties {
 	display: none;
 }
 
+.nav_menu {
+	background: inherit;
+}
+
 .nav-login,
 .nav_menu .search,
 .aside .toggle_aside,
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 0e4936f22..a079d8160 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -15,6 +15,7 @@
 html, body {
 	margin: 0;
 	padding: 0;
+	background: white;
 	font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
 	font-size: 100%;
 }
@@ -591,12 +592,17 @@ input[type="search"] {
 
 /*=== Body */
 #global {
+	background: inherit;
 	display: table;
 	width: 100%;
 	height: 100%;
 	table-layout: fixed;
 }
 
+#stream {
+	background: inherit;
+}
+
 .aside {
 	display: table-cell;
 	width: 300px;
@@ -653,6 +659,10 @@ input[type="search"] {
 }
 
 /*=== Day indication */
+.day {
+	background: inherit;
+}
+
 .day .name {
 	position: absolute;
 	left: 0;
@@ -1164,6 +1174,10 @@ input:checked + .slide-container .properties {
 	display: none;
 }
 
+.nav_menu {
+	background: inherit;
+}
+
 .nav-login,
 .nav_menu .search,
 .aside .toggle_aside,