Merge pull request #208 from hellcp/patch-14

Show messages about loading pages

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();
   });
-});
+});

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

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>

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>