From fc3a52b224e3eec3c71c7b6ad55d558091fad8b6 Mon Sep 17 00:00:00 2001
From: Stasiek Michalski <hellcp@opensuse.org>
Date: Tue, 5 Jun 2018 08:27:18 +0200
Subject: [PATCH 1/4] Add HTML required for infinite scroll messages

---
 resources/views/timeline/personal.blade.php | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/resources/views/timeline/personal.blade.php b/resources/views/timeline/personal.blade.php
index ce9415638..3c53eb838 100644
--- a/resources/views/timeline/personal.blade.php
+++ b/resources/views/timeline/personal.blade.php
@@ -36,6 +36,27 @@
     </div>
     @endif
     </div>
+
+    <div class="page-load-status">
+      <div class="infinite-scroll-request">
+        <div class="fixed-top loading-page"></div>
+      </div>
+      <div class="infinite-scroll-last">
+        <h3>No more content</h3>
+        <p class="text-muted">
+          Maybe you could try 
+          <a href="{{route('discover')}}">discovering</a>
+          more people you can follow.
+        </p>
+      </div>
+      <div class="infinite-scroll-error">
+        <h3>Whoops, an error</h3>
+        <p class="text-muted">
+          Try reloading the page
+        </p>
+      </div>
+    </div>
+
     <div class="d-flex justify-content-center">
       {{$timeline->links()}}
     </div>

From 0381ac249ed009905b206f7c6a13c469ee58d158 Mon Sep 17 00:00:00 2001
From: Stasiek Michalski <hellcp@opensuse.org>
Date: Tue, 5 Jun 2018 08:29:38 +0200
Subject: [PATCH 2/4] Add infinite scroll messages to public timeline

---
 resources/views/timeline/public.blade.php | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/resources/views/timeline/public.blade.php b/resources/views/timeline/public.blade.php
index e5b814f1a..6a75c944f 100644
--- a/resources/views/timeline/public.blade.php
+++ b/resources/views/timeline/public.blade.php
@@ -27,6 +27,27 @@
 
     @endforeach
     </div>
+
+    <div class="page-load-status">
+      <div class="infinite-scroll-request">
+        <div class="fixed-top loading-page"></div>
+      </div>
+      <div class="infinite-scroll-last">
+        <h3>No more content</h3>
+        <p class="text-muted">
+          Maybe you could try 
+          <a href="{{route('discover')}}">discovering</a>
+          more people you can follow.
+        </p>
+      </div>
+      <div class="infinite-scroll-error">
+        <h3>Whoops, an error</h3>
+        <p class="text-muted">
+          Try reloading the page
+        </p>
+      </div>
+    </div>
+
     <div class="d-flex justify-content-center">
       {{$timeline->links()}}
     </div>

From fca898e7667ba58099a1604f765e8056af09ecd5 Mon Sep 17 00:00:00 2001
From: Stasiek Michalski <hellcp@opensuse.org>
Date: Tue, 5 Jun 2018 08:37:12 +0200
Subject: [PATCH 3/4] Add css for loading page routine

---
 resources/assets/sass/custom.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/resources/assets/sass/custom.scss b/resources/assets/sass/custom.scss
index 92f0ca5ad..1db518df5 100644
--- a/resources/assets/sass/custom.scss
+++ b/resources/assets/sass/custom.scss
@@ -202,3 +202,15 @@ body, button, input, textarea {
     z-index:1020
   }
 }
+
+@keyframes loading-bar {
+  from { background-position: 0 0; }
+  to { background-position: 100vw 0; }
+}
+
+.loading-page {
+  background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd);
+  width: 100vw;
+  height: .25rem;
+  animation: loading-bar 3s linear infinite;
+}

From cdc19d44195415db00686a15afed9eba6a053bb7 Mon Sep 17 00:00:00 2001
From: Stasiek Michalski <hellcp@opensuse.org>
Date: Tue, 5 Jun 2018 08:38:48 +0200
Subject: [PATCH 4/4] Add JS for page messages

---
 resources/assets/js/timeline.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/timeline.js b/resources/assets/js/timeline.js
index 576b3e71e..72c59406c 100644
--- a/resources/assets/js/timeline.js
+++ b/resources/assets/js/timeline.js
@@ -1,12 +1,14 @@
 $(document).ready(function() {
   $('.pagination').hide();
+  $('.page-load-status').show();
   let elem = document.querySelector('.timeline-feed');
   let infScroll = new InfiniteScroll( elem, {
     path: '.pagination__next',
     append: '.timeline-feed',
+    status: '.page-load-status',
     history: false,
   });
   infScroll.on( 'append', function( response, path, items ) {
     pixelfed.hydrateLikes();
   });
-});
\ No newline at end of file
+});