AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add loading bar to search

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-07 11:48:21 +01:00
parent 9fd85096fa
commit 8a748e281c
1 changed files with 84 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/lib/components/Searchbar.svelte
View File

@ -73,7 +73,7 @@
closePopup?.dispatchEvent(new MouseEvent("click")); closePopup?.dispatchEvent(new MouseEvent("click"));
} }
await goto( goto(
`/${assetType === "ETF" ? "etf" : assetType === "Index" ? "index" : "stocks"}/${symbol}`, `/${assetType === "ETF" ? "etf" : assetType === "Index" ? "index" : "stocks"}/${symbol}`,
); );
@ -168,8 +168,8 @@
`/api/searchbar?query=${encodeURIComponent(inputValue)}&limit=10`, `/api/searchbar?query=${encodeURIComponent(inputValue)}&limit=10`,
); );
searchBarData = await response?.json(); searchBarData = await response?.json();
}, 50); // delay isLoading = false;
isLoading = false; }, 300); // delay
} }
function handleKeyDown(symbol) { function handleKeyDown(symbol) {
@ -251,7 +251,7 @@
) { ) {
(async () => { (async () => {
// Add 500 ms delay is important otherwise bug since #each has searchHistory and updates too quickly and redirects to wrong symbol // Add 500 ms delay is important otherwise bug since #each has searchHistory and updates too quickly and redirects to wrong symbol
await new Promise((resolve) => setTimeout(resolve, 500)); await new Promise((resolve) => setTimeout(resolve, 800));
// Update search history after delay // Update search history after delay
searchHistory = updatedSearchHistory; searchHistory = updatedSearchHistory;
@ -330,7 +330,13 @@
<div <div
class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold" class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold"
> >
{#if isLoading} {#if isLoading && inputValue?.length > 0}
<div
class="pointer-events-none absolute end-6 top-2.5 gap-1 opacity-80 rtl:flex-row-reverse flex"
>
<span class="loading loading-spinner loading-sm"></span>
</div>
{:else if isLoading}
<span class="loading loading-spinner loading-sm"></span> <span class="loading loading-spinner loading-sm"></span>
{:else if inputValue?.length > 0} {:else if inputValue?.length > 0}
<label class="cursor-pointer" on:click={() => (inputValue = "")}> <label class="cursor-pointer" on:click={() => (inputValue = "")}>
@ -354,56 +360,79 @@
{/if} {/if}
</div> </div>
</div> </div>
<Combobox.Content {#if isLoading && inputValue?.length > 0}{:else}
class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-secondary px-1 py-3 shadow-popover outline-hidden" <Combobox.Content
sideOffset={8} class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-secondary px-1 py-3 shadow-popover outline-hidden"
> sideOffset={8}
{#if inputValue?.length > 0 && searchBarData?.length > 0} >
<div {#if inputValue?.length > 0 && searchBarData?.length > 0}
class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full" <div
> class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full"
Suggestions
</div>
{#each searchBarData as item}
<Combobox.Item
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary"
value={item?.symbol}
label={item?.name}
on:click={() => handleSearch(item?.symbol, item?.type)}
> >
<div class="flex flex-row items-center justify-between w-full"> Suggestions
<span class="text-sm text-blue-400">{item?.symbol}</span> </div>
<span class="ml-3 text-sm text-white">{item?.name}</span> {#each searchBarData as item}
<span class="ml-auto text-sm text-white">{item?.type}</span> <Combobox.Item
</div> class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary"
</Combobox.Item> value={item?.symbol}
{/each} label={item?.name}
{:else if inputValue?.length === 0 || !showSuggestions} on:click={() => handleSearch(item?.symbol, item?.type)}
<div >
class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full" <div
> class="flex flex-row items-center justify-between w-full"
{searchHistory?.length > 0 ? "Recent" : "Popular"} >
</div> <span class="text-sm text-blue-400">{item?.symbol}</span>
{#each searchHistory?.length > 0 ? searchHistory : popularList as item} <span class="ml-3 text-sm text-white">{item?.name}</span>
<Combobox.Item <span class="ml-auto text-sm text-white">{item?.type}</span>
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary" </div>
value={item?.symbol} </Combobox.Item>
label={item?.name} {/each}
on:click={() => handleSearch(item?.symbol, item?.type)} {:else if inputValue?.length === 0}
<div
class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full"
> >
<div class="flex flex-row items-center justify-between w-full"> {searchHistory?.length > 0 ? "Recent" : "Popular"}
<span class="text-sm text-blue-400">{item?.symbol}</span> </div>
<span class="ml-3 text-sm text-white">{item?.name}</span> {#each searchHistory as item}
<span class="ml-auto text-sm text-white">{item?.type}</span> <Combobox.Item
</div> class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary"
</Combobox.Item> value={item?.symbol}
{/each} label={item?.name}
{:else} on:click={() => handleSearch(item?.symbol, item?.type)}
<span class="block px-5 py-2 text-sm text-white"> >
No results found <div
</span> class="flex flex-row items-center justify-between w-full"
{/if} >
</Combobox.Content> <span class="text-sm text-blue-400">{item?.symbol}</span>
<span class="ml-3 text-sm text-white">{item?.name}</span>
<span class="ml-auto text-sm text-white">{item?.type}</span>
</div>
</Combobox.Item>
{/each}
{:else if showSuggestions}
{#each searchHistory as item}
<Combobox.Item
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary"
value={item?.symbol}
label={item?.name}
on:click={() => handleSearch(item?.symbol, item?.type)}
>
<div
class="flex flex-row items-center justify-between w-full"
>
<span class="text-sm text-blue-400">{item?.symbol}</span>
<span class="ml-3 text-sm text-white">{item?.name}</span>
<span class="ml-auto text-sm text-white">{item?.type}</span>
</div>
</Combobox.Item>
{/each}
{:else}
<span class="block px-5 py-2 text-sm text-white">
No results found
</span>
{/if}
</Combobox.Content>
{/if}
</Combobox.Root> </Combobox.Root>
</div> </div>
</div> </div>
@ -423,11 +452,11 @@
bind:checked={searchBarModalChecked} bind:checked={searchBarModalChecked}
/> />
<dialog id="searchBarModal" class="modal p-3 sm:p-0"> <dialog id="searchBarModal" class="modal modal-bottom">
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label> <label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
<div <div
class="z-999 modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3" class="z-40 modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
> >
<label <label
for="searchBarModal" for="searchBarModal"
@ -596,6 +625,3 @@
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End Drawer Sidewise for mobile-->
<!--End Drawer Sidewise for mobile-->