UX: Show spinner when searching on full page search.

This commit is contained in:
Guo Xiang Tan 2019-03-19 15:18:49 +08:00
parent f8be43644b
commit bc81f64a64
1 changed files with 89 additions and 85 deletions

View File

@ -59,105 +59,109 @@
</div>
{{/if}}
{{plugin-outlet name="full-page-search-below-search-info" args=(hash search=searchTerm)}}
{{plugin-outlet name="full-page-search-below-search-info" args=(hash search=searchTerm)}}
<div class="search-results">
{{#load-more selector=".fps-result" action=(action "loadMore")}}
{{#each model.posts as |result|}}
<div class='fps-result'>
<div class='author'>
<a href={{result.userPath}} data-user-card="{{unbound result.username}}">
{{avatar result imageSize="large"}}
</a>
</div>
<div class='fps-topic'>
<div class='topic'>
{{#if bulkSelectEnabled}}
{{track-selected selectedList=selected selectedId=result.topic}}
{{/if}}
<a class='search-link' href='{{unbound result.url}}' {{action "logClick" result.topic_id}}>
{{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
{{#unless searching}}
<div class="search-results">
{{#load-more selector=".fps-result" action=(action "loadMore")}}
{{#each model.posts as |result|}}
<div class='fps-result'>
<div class='author'>
<a href={{result.userPath}} data-user-card="{{unbound result.username}}">
{{avatar result imageSize="large"}}
</a>
</div>
<div class='search-category'>
{{#if result.topic.category.parentCategory}}
{{category-link result.topic.category.parentCategory}}
<div class='fps-topic'>
<div class='topic'>
{{#if bulkSelectEnabled}}
{{track-selected selectedList=selected selectedId=result.topic}}
{{/if}}
{{category-link result.topic.category hideParent=true}}
{{#each result.topic.tags as |tag|}}
{{discourse-tag tag isPrivateMessage=isPrivateMessage}}
{{/each}}
{{plugin-outlet name="full-page-search-category" args=(hash result=result)}}
<a class='search-link' href='{{unbound result.url}}' {{action "logClick" result.topic_id}}>
{{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
</a>
<div class='search-category'>
{{#if result.topic.category.parentCategory}}
{{category-link result.topic.category.parentCategory}}
{{/if}}
{{category-link result.topic.category hideParent=true}}
{{#each result.topic.tags as |tag|}}
{{discourse-tag tag isPrivateMessage=isPrivateMessage}}
{{/each}}
{{plugin-outlet name="full-page-search-category" args=(hash result=result)}}
</div>
</div>
</div>
<div class='blurb container'>
<span class='date'>
{{format-age result.created_at}}
{{#if result.blurb}}
-
{{/if}}
</span>
{{#if result.blurb}}
{{#highlight-text highlight=highlightQuery}}
{{{unbound result.blurb}}}
{{/highlight-text}}
{{/if}}
</div>
{{#if showLikeCount}}
{{#if result.like_count}}
<span class='like-count'>
{{result.like_count}} {{d-icon "heart"}}
<div class='blurb container'>
<span class='date'>
{{format-age result.created_at}}
{{#if result.blurb}}
-
{{/if}}
</span>
{{/if}}
{{/if}}
</div>
</div>
{{/each}}
{{#conditional-loading-spinner condition=loading }}
{{#unless hasResults}}
{{#if searchActive}}
<h3>{{i18n "search.no_results"}}</h3>
{{#if showSuggestion}}
<div class="no-results-suggestion">
{{i18n "search.cant_find"}}
{{#if canCreateTopic}}
<a href {{action "createTopic" searchTerm}}>{{i18n "search.start_new_topic"}}</a>
{{#unless siteSettings.login_required}}
{{i18n "search.or_search_google"}}
{{/unless}}
{{else}}
{{i18n "search.search_google"}}
{{#if result.blurb}}
{{#highlight-text highlight=highlightQuery}}
{{{unbound result.blurb}}}
{{/highlight-text}}
{{/if}}
</div>
{{google-search searchTerm=searchTerm}}
{{/if}}
{{/if}}
{{/unless}}
{{#if hasResults}}
{{#unless loading}}
<h3 class="search-footer">
{{#if model.grouped_search_result.more_full_page_results}}
{{#if isLastPage }}
{{i18n "search.more_results"}}
{{#if showLikeCount}}
{{#if result.like_count}}
<span class='like-count'>
{{result.like_count}} {{d-icon "heart"}}
</span>
{{/if}}
{{else}}
{{i18n "search.no_more_results"}}
{{/if}}
</h3>
</div>
</div>
{{/each}}
{{#conditional-loading-spinner condition=loading }}
{{#unless hasResults}}
{{#if searchActive}}
<h3>{{i18n "search.no_results"}}</h3>
{{#if showSuggestion}}
<div class="no-results-suggestion">
{{i18n "search.cant_find"}}
{{#if canCreateTopic}}
<a href {{action "createTopic" searchTerm}}>{{i18n "search.start_new_topic"}}</a>
{{#unless siteSettings.login_required}}
{{i18n "search.or_search_google"}}
{{/unless}}
{{else}}
{{i18n "search.search_google"}}
{{/if}}
</div>
{{google-search searchTerm=searchTerm}}
{{/if}}
{{/if}}
{{/unless}}
{{/if}}
{{/conditional-loading-spinner}}
{{/load-more}}
</div>
{{#if hasResults}}
{{#unless loading}}
<h3 class="search-footer">
{{#if model.grouped_search_result.more_full_page_results}}
{{#if isLastPage }}
{{i18n "search.more_results"}}
{{/if}}
{{else}}
{{i18n "search.no_more_results"}}
{{/if}}
</h3>
{{/unless}}
{{/if}}
{{/conditional-loading-spinner}}
{{/load-more}}
</div>
{{else}}
{{loading-spinner size="medium"}}
{{/unless}}
</div>
<div class="search-advanced-sidebar">