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

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(); ?>

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;
 }

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;
 }

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;
 }

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;
 }