maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: display card HTML for loading during search (#18674)

Browse source
This commit is contained in:
Moeki Kawakami 2022-11-05 04:11:59 +09:00 • committed by GitHub
parent 010cc9f617
commit 7e270452bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/packs/searchParams.js
View file

@ -17,22 +17,21 @@ function getQueryParams(qs) {
const params = getQueryParams(document.location.search);
function searchMain(substories) {
function searchMain(substories, loadingHTML) {
const query = filterXSS(params.q);
const filters = filterXSS(params.filters || 'class_name:Article');
const sortBy = filterXSS(params.sort_by || '');
const sortDirection = filterXSS(params.sort_direction || '');
substories.innerHTML =
'<div class="p-9 align-center crayons-card"><br></div>';
substories.innerHTML = loadingHTML;
if (document.getElementById('query-wrapper')) {
search(query, filters, sortBy, sortDirection);
initializeFilters(query, filters);
initializeSortingTabs(query);
initializeSortingTabs(query, substories, loadingHTML);
}
}
function initializeSortingTabs(query) {
function initializeSortingTabs(query, substories, loadingHTML) {
const sortingTabs = document.querySelectorAll(
'#sorting-option-tabs .crayons-navigation__item',
);
@ -47,6 +46,7 @@ function initializeSortingTabs(query) {
const { sortBy, sortDirection } = e.target.dataset;
const sortString = buildSortString(sortBy, sortDirection);
substories.innerHTML = loadingHTML;
if (filters) {
window.history.pushState(
null,
@ -213,11 +213,14 @@ const waitingOnSearch = setInterval(() => {
) {
clearInterval(waitingOnSearch);
const substories = document.getElementById('substories');
const loadingHTML = document.querySelector(
'template[id=crayons-story-loading]',
).innerHTML;
if (
substories &&
document.getElementsByClassName('search-results-loaded').length === 0
) {
searchMain(substories);
searchMain(substories, loadingHTML);
}
}
}, 1);

22
app/views/stories/articles_search/index.html.erb
View file

@ -54,13 +54,23 @@
<div class="articles-list crayons-layout__content" id="articles-list" data-follow-button-container="true">
<div id="banner-section"></div>
<div class="substories" id="substories">
<div class="p-9 align-center crayons-card">
<br />
</div>
</div>
<div class="loading-articles" id="loading-articles">
<%= t("core.loading") %>
</div>
<template id="crayons-story-loading">
<div class="crayons-story" title="Loading posts...">
<div class="crayons-story__body">
<div class="crayons-story__top mb-3">
<div class="crayons-story__meta w-100">
<div class="crayons-scaffold-loading mr-2 w-0 h-0 p-4 radius-full"></div>
<div class="crayons-scaffold-loading w-25 h-0 py-2"></div>
</div>
</div>
<div class="crayons-story__indention">
<div class="crayons-scaffold-loading w-75 h-0 py-3 mb-2"></div>
<div class="crayons-scaffold-loading w-50 h-0 py-2 mb-8"></div>
</div>
</div>
</div>
</template>
</div>
</div>
</main>