Skip to content

Public competition list: add loading animation, lazy loading, hide buttons during loading #1285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Didayolo merged 2 commits into from
Jan 20, 2024
Merged

Public competition list: add loading animation, lazy loading, hide buttons during loading #1285

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c453702
Add loading animation, lazy loading, hide buttons during loading
Didayolo Jan 20, 2024
92fedf4
Rename public competitions page
Didayolo Jan 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions src/static/riot/competitions/public-list.tag
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<public-list>
<h1>Public Competitions</h1>
<h1>Public Benchmarks and Competitions</h1>
<div class="pagination-nav" hide="{(competitions.count < 10)}">
<button show="{competitions.previous}" onclick="{handle_ajax_pages.bind(this, -1)}" class="float-left ui inline button active">Back</button>
<button hide="{competitions.previous}" disabled="disabled" class="float-left ui inline button disabled">Back</button>
{ current_page } of {Math.ceil(competitions.count/competitions.page_size)}
<button show="{competitions.next}" onclick="{handle_ajax_pages.bind(this, 1)}" class="float-right ui inline button active">Next</button>
<button hide="{competitions.next}" disabled="disabled" class="float-right ui inline button disabled">Next</button>
</div>
<div id="loading" class="loading-indicator" show="{!competitions}">
<div class="spinner"></div>
</div>
<div each="{competition in competitions.results}">
<div class="tile-wrapper">
<div class="ui square tiny bordered image img-wrapper">
<img src="{competition.logo}">
<img src="{competition.logo}" loading="lazy">
</div>
<a class="link-no-deco" href="../{competition.id}">
<div class="comp-info">
Expand Down Expand Up @@ -59,6 +62,8 @@

self.update_competitions_list = function (num) {
self.current_page = num
$('#loading').show()
$('.pagination-nav').hide()
if (self.competitions_cache[self.current_page]){
self.competitions = self.competitions_cache[self.current_page]
history.pushState("", document.title, "?page="+self.current_page)
Expand All @@ -67,11 +72,15 @@
} else {
return CODALAB.api.get_public_competitions({"page":self.current_page})
.fail(function (response) {
$('#loading').hide()
$('.pagination-nav').show()
toastr.error("Could not load competition list")
})
.done(function (response){
self.competitions = response
self.competitions_cache[self.current_page.toString()] = response
$('#loading').hide()
$('.pagination-nav').show()
history.pushState("", document.title, "?page="+self.current_page)
$('.pagination-nav > button').prop('disabled', false)
self.update()
Expand Down Expand Up @@ -208,6 +217,27 @@
font-size 13px
text-align left
margin 0.35em

.loading-indicator
display flex
align-items center
padding 20px
width 100%
margin: 0 auto;

.spinner
border 4px solid rgba(0,0,0,.1)
width 36px
height 36px
border-radius 50%
border-top-color #3498db
animation spin 1s ease-in-out infinite

@keyframes spin
0%
transform rotate(0deg)
100%
transform rotate(360deg)
</style>

</public-list>