Loader animation while waiting for first articles (#2845)

* Loader animation while waiting for first articles

Especially useful when a slow search is being performed.
Thanks to one new flush at the right time, the left colum and top menu
will be there, waiting for the articles to come. This avoids layout
flashes (the left column used to take the full width while waiting for
articles).
For optimal use, this assumes that the deployment has a proper buffering
configuration, such as in our official Docker image (also when using
Træfik as a reverse proxy in front). Might not work just as well with
other Apache or nginx setups.

* Fix on mobile

And simplified CSS

* Properly hide the loader

It was not possible to find a position where the loading animation would
be always hidden after load, so change strategy to hide it automatically
by CSS when the actual content has arrived

5 files changed, 65 insertions, 6 deletions

diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index aae02c820..63b032e47 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -1,3 +1,5 @@
+<div id="first_load" class="loading"></div>
+
 <?php
 	$actual_view = Minz_Request::actionName();
 	flush();
@@ -197,7 +199,7 @@
 			<?php } ?>
 		</form>
 	</div>
-	
+
 	<?php
 		if (FreshRSS_Context::$order === 'DESC') {
 			$order = 'ASC';
@@ -214,8 +216,9 @@
 	<a id="toggle-order" class="btn" href="<?= Minz_Url::display($url_order) ?>" title="<?= $title ?>">
 		<?= _i($icon) ?>
 	</a>
-	
+
 	<?php if (FreshRSS_Auth::hasAccess() || FreshRSS_Context::$system_conf->allow_anonymous_refresh) { ?>
 	<a id="actualize" class="btn" href="<?= _url('feed', 'actualize') ?>" title="<?= _t('gen.action.actualize') ?>"><?= _i('refresh') ?></a>
 	<?php } ?>
 </div>
+<?php flush(); ?>
diff --git a/p/themes/Alternative-Dark/template.css b/p/themes/Alternative-Dark/template.css
index 0ec76ea2d..39d7449dd 100644
--- a/p/themes/Alternative-Dark/template.css
+++ b/p/themes/Alternative-Dark/template.css
@@ -868,7 +868,21 @@ br {
 	display: block;
 }
 
-/*=== "Load more" part */
+/*=== "Load" parts */
+#stream {
+	position: relative;
+	z-index: 5;
+}
+
+/* Only matches while waiting for div#stream to be received */
+#first_load:nth-last-of-type(2) {
+	margin: -40px auto 0 auto;
+	height: 40px;
+	position: relative;
+	top: 250px;
+	z-index: 2;
+}
+
 #load_more {
 	min-height: 40px;
 }
diff --git a/p/themes/Alternative-Dark/template.rtl.css b/p/themes/Alternative-Dark/template.rtl.css
index a8e979273..9694a7f78 100644
--- a/p/themes/Alternative-Dark/template.rtl.css
+++ b/p/themes/Alternative-Dark/template.rtl.css
@@ -868,7 +868,21 @@ br {
 	display: block;
 }
 
-/*=== "Load more" part */
+/*=== "Load" parts */
+#stream {
+	position: relative;
+	z-index: 5;
+}
+
+/* Only matches while waiting for div#stream to be received */
+#first_load:nth-last-of-type(2) {
+	margin: -40px auto 0 auto;
+	height: 40px;
+	position: relative;
+	top: 250px;
+	z-index: 2;
+}
+
 #load_more {
 	min-height: 40px;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index ed10c9c7d..8c7e77697 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -868,7 +868,21 @@ br {
 	display: block;
 }
 
-/*=== "Load more" part */
+/*=== "Load" parts */
+#stream {
+	position: relative;
+	z-index: 5;
+}
+
+/* Only matches while waiting for div#stream to be received */
+#first_load:nth-last-of-type(2) {
+	margin: -40px auto 0 auto;
+	height: 40px;
+	position: relative;
+	top: 250px;
+	z-index: 2;
+}
+
 #load_more {
 	min-height: 40px;
 }
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 39942449c..1ea778bee 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -868,7 +868,21 @@ br {
 	display: block;
 }
 
-/*=== "Load more" part */
+/*=== "Load" parts */
+#stream {
+	position: relative;
+	z-index: 5;
+}
+
+/* Only matches while waiting for div#stream to be received */
+#first_load:nth-last-of-type(2) {
+	margin: -40px auto 0 auto;
+	height: 40px;
+	position: relative;
+	top: 250px;
+	z-index: 2;
+}
+
 #load_more {
 	min-height: 40px;
 }