repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Add indicator to search infinite scroll

Browse source
This commit is contained in:
Jake Howard 2022-10-23 17:55:52 +01:00
parent 0971fcd8a3
commit a70f789a8d
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/src/scss/_search.scss
View file

@ -14,7 +14,7 @@ body.page-searchpage {
max-width: 80%; max-width: 80%;
} }
#search-indicator.htmx-request { .htmx-request {
animation: search-loading 1.5s linear infinite; animation: search-loading 1.5s linear infinite;
} }
@ -45,4 +45,12 @@ body.page-searchpage {
.listing-item { .listing-item {
margin-top: 2rem; margin-top: 2rem;
} }
.search-page-indicator {
width: 100%;
&:not(.htmx-request) {
display: none;
}
}
} }

5
website/search/templates/search/search_results.html
View file

@ -7,5 +7,8 @@
{% if not results and page_num == 1 %}<p>No results found</p>{% endif %} {% if not results and page_num == 1 %}<p>No results found</p>{% endif %}
{% if results.has_next %} {% if results.has_next %}
<span hx-get="{{ search_url }}{% querystring page=results.next_page_number %}" hx-trigger="revealed" hx-swap="outerHTML"></span> <span hx-get="{{ search_url }}{% querystring page=results.next_page_number %}" hx-trigger="revealed" hx-indicator="#search-page-indicator-{{ results.next_page_number }}" hx-swap="outerHTML"></span>
<div class="icon mt-5 mx-auto htmx-indicator search-page-indicator" id="search-page-indicator-{{ results.next_page_number }}">
<i class="fas fa-circle-notch"></i>
</div>
{% endif %} {% endif %}