tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-06 20:55:21 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Visual feedback when search is loading

Browse Source
This commit is contained in:
Ole Eskild Steensen 2023-01-08 15:55:12 +01:00
parent ea3199f4f1
commit 2d88a78cf3
2 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/site/_includes/components/searchScript.njk
View File

@ -11,6 +11,48 @@
}
}
const loadingSvg = `<svg width="100" height="100" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
<circle cx="22" cy="22" r="6" stroke-opacity="0">
<animate attributeName="r"
begin="1.5s" dur="3s"
values="6;22"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="1.5s" dur="3s"
values="1;0" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-width"
begin="1.5s" dur="3s"
values="2;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="6" stroke-opacity="0">
<animate attributeName="r"
begin="3s" dur="3s"
values="6;22"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="3s" dur="3s"
values="1;0" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-width"
begin="3s" dur="3s"
values="2;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="8">
<animate attributeName="r"
begin="0s" dur="1.5s"
values="6;1;2;3;4;5;6"
calcMode="linear"
repeatCount="indefinite" />
</circle>
</g>
</svg>`;
function debounce(func, wait, immediate) {
var timeout;
return function() {
@ -111,7 +153,7 @@
}
});
const debouncedSearch = debounce(search, 250, false);
const debouncedSearch = debounce(search, 200, false);
field = document.querySelector('#term');
field.addEventListener('keydown', (e) => {
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
@ -137,6 +179,8 @@
if(search == lastSearch) return;
console.log(`search for ${search}`);
window.lastSearch = search;
resultsDiv.innerHTML = loadingSvg;
let searchRequest = await fetch(`/api/search?term=${encodeURIComponent(search)}`);
let results = await searchRequest.json();
let resultsHTML = '';