Merge pull request #208 from hellcp/patch-14

Show messages about loading pages
This commit is contained in:
daniel 2018-06-05 01:17:07 -06:00 committed by GitHub
commit ba9cd33301
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 1 deletions

View file

@ -1,9 +1,11 @@
$(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 ) {

View file

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

View file

@ -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>

View file

@ -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>