fix: add loading/progress bar when searching objects (#505)

netwerk-digitaal-erfgoed · Nov 3, 2021 · 82bc5ff · 82bc5ff
1 parent 2154224
commit 82bc5ff
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/solid-crs-manage/lib/features/search/search-root.component.ts b/packages/solid-crs-manage/lib/features/search/search-root.component.ts
@@ -7,7 +7,7 @@ import { from } from 'rxjs';
 import { Interpreter, State } from 'xstate';
 import { RxLitElement } from 'rx-lit';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
-import { AppEvents, DismissAlertEvent } from '../../app.events';
+import { DismissAlertEvent } from '../../app.events';
 import { CollectionEvents } from '../collection/collection.events';
 import { ObjectEvents } from '../object/object.events';
 import { SearchContext, SearchStates } from './search.machine';
@@ -127,7 +127,12 @@ export class SearchRootComponent extends RxLitElement {
    */
   render(): TemplateResult {
 
+    const showLoading = this.actor?.state?.matches(SearchStates.SEARCHING);
+
     return html`
+
+      ${ showLoading ? html`<nde-progress-bar></nde-progress-bar>` : html``}
+
       <nde-content-header inverse>
         <div slot="icon">${ unsafeSVG(Search) }</div>
         <div slot="title">${this.translator?.translate('search.header.search-results-for')} "${this.searchTerm}"</div>
@@ -191,6 +196,12 @@ export class SearchRootComponent extends RxLitElement {
     return [
       unsafeCSS(Theme),
       css`
+        nde-progress-bar {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          left: 0;
+        }
 
         *::-webkit-scrollbar-thumb {
           background-color: var(--colors-foreground-light);

diff --git a/packages/solid-crs-presentation/lib/features/search/search-root.component.ts b/packages/solid-crs-presentation/lib/features/search/search-root.component.ts
@@ -127,7 +127,12 @@ export class SearchRootComponent extends RxLitElement {
    */
   render(): TemplateResult {
 
+    const showLoading = this.actor?.state?.matches(SearchStates.SEARCHING);
+
     return html`
+
+      ${ showLoading ? html`<nde-progress-bar></nde-progress-bar>` : html``}
+
       <nde-content-header inverse>
         <div slot="icon">${ unsafeSVG(Search) }</div>
         <div slot="title">${this.translator?.translate('search.header.search-results-for')} "${this.searchTerm}"</div>
@@ -192,6 +197,13 @@ export class SearchRootComponent extends RxLitElement {
       unsafeCSS(Theme),
       css`
 
+        nde-progress-bar {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          left: 0;
+        }
+
         *::-webkit-scrollbar-thumb {
           background-color: var(--colors-foreground-light);
           border: 3px solid var(--colors-background-normal);