refactor: remove default data from search page

Closes #151

src/app/modules/data/detail/data-detail.html

@@ -24,7 +24,7 @@
   </ion-refresher>
   <div [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && isDisconnected()">
-      <div class="notFoundContainer">
+      <div class="centeredMessageContainer">
         <ion-icon name="no-connection"> </ion-icon>
         <ion-label>
           {{ 'data.detail.COULD_NOT_CONNECT' | translate }}
@@ -32,7 +32,7 @@
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
-      <div class="notFoundContainer">
+      <div class="centeredMessageContainer">
         <ion-icon name="broken-link"> </ion-icon>
         <ion-label>
           {{ 'data.detail.NOT_FOUND' | translate }}

src/app/modules/data/list/data-list.component.ts

@@ -80,6 +80,11 @@ export class DataListComponent implements OnChanges, OnInit, OnDestroy {
 
   @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
 
+  /**
+   * Signalizes that the data is being loaded
+   */
+  @Input() loading = true;
+
   /**
    * Calculate how many items would fill the screen
    */
@@ -130,10 +135,10 @@ export class DataListComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * Function to call whenever scroll view visible range changed
    */
-  scrolled(_index: number) {
+  scrolled(index: number) {
     if (
-      // first condition prevents "load more" to be executed before event having initial items
-      this.items &&
+      // first condition prevents "load more" to be executed even before scrolling
+      index > 0 &&
       (this.items?.length ?? 0) - this.viewPort.getRenderedRange().end <=
         (this.items?.length ?? 0) * this.reloadThreshold
     ) {

src/app/modules/data/list/data-list.html

@@ -15,12 +15,14 @@
     </ion-list>
   </cdk-virtual-scroll-viewport>
 </ng-container>
-<div [style.display]="items && items.length === 0 ? 'block' : 'none'">
-  <ion-label class="notFoundContainer">
+<div
+  [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'"
+>
+  <ion-label class="centeredMessageContainer">
     {{ 'search.nothing_found' | translate | titlecase }}
   </ion-label>
 </div>
-<ion-list [style.display]="items ? 'none' : 'block'">
+<ion-list [style.display]="loading ? 'block' : 'none'">
   <stapps-skeleton-list-item
     [hideThumbnail]="singleType"
     *ngFor="let skeleton of [].constructor(skeletonItems)"

src/app/modules/data/list/food-data-list.component.ts

@@ -26,6 +26,8 @@ export class FoodDataListComponent extends SearchPageComponent {
    * Sets the forced filter to present only places for eating/drinking
    */
   initialize() {
+    this.showDefaultData = true;
+
     if (this.positionService.position) {
       this.sortQuery = [
         {

src/app/modules/data/list/search-page.component.ts

@@ -40,6 +40,16 @@ import {PositionService} from '../../map/position.service';
   providers: [ContextMenuService],
 })
 export class SearchPageComponent implements OnInit, OnDestroy {
+  /**
+   * Signalizes that the data is being loaded
+   */
+  loading = false;
+
+  /**
+   * Show default data (e.g. when there is user interaction)
+   */
+  @Input() showDefaultData = false;
+
   /**
    * Api query filter
    */
@@ -166,35 +176,37 @@ export class SearchPageComponent implements OnInit, OnDestroy {
       };
     }
 
-    return this.dataProvider.search(searchOptions).then(
-      async result => {
-        this.singleTypeResponse =
-          result.facets.find(facet => facet.field === 'type')?.buckets
-            .length === 1;
-        if (append) {
-          let items = await this.items;
-          // append results
-          items = [...items, ...result.data];
-          this.items = (async () => items)();
-        } else {
-          // override items with results
-          this.items = (async () => {
-            this.updateContextFilter(result.facets);
+    this.loading = !append;
 
-            return result.data;
-          })();
-        }
-      },
-      async error => {
-        const alert: HTMLIonAlertElement = await this.alertController.create({
-          buttons: ['Dismiss'],
-          header: 'Error',
-          subHeader: error.message,
-        });
+    try {
+      const result = await this.dataProvider.search(searchOptions);
+      this.singleTypeResponse =
+        result.facets.find(facet => facet.field === 'type')?.buckets.length ===
+        1;
+      if (append) {
+        let items = await this.items;
+        // append results
+        items = [...items, ...result.data];
+        this.items = (async () => items)();
+      } else {
+        // override items with results
+        this.items = (async () => {
+          this.updateContextFilter(result.facets);
 
-        await alert.present();
-      },
-    );
+          return result.data;
+        })();
+      }
+    } catch (error) {
+      const alert: HTMLIonAlertElement = await this.alertController.create({
+        buttons: ['Dismiss'],
+        header: 'Error',
+        subHeader: error.message,
+      });
+
+      await alert.present();
+    } finally {
+      this.loading = false;
+    }
   }
 
   /**
@@ -268,8 +280,14 @@ export class SearchPageComponent implements OnInit, OnDestroy {
         this.filterQuery = query[1];
         this.sortQuery = query[2];
         this.from = 0;
-        await this.fetchAndUpdateItems();
-        this.queryChanged.next();
+        if (
+          typeof this.filterQuery !== 'undefined' ||
+          this.queryText?.length > 0 ||
+          this.showDefaultData
+        ) {
+          await this.fetchAndUpdateItems();
+          this.queryChanged.next();
+        }
       }),
       this.settingsProvider.settingsActionChanged$.subscribe(
         ({type, payload}) => {

src/app/modules/data/list/search-page.html

@@ -14,17 +14,26 @@
       (ngModelChange)="searchStringChanged($event)"
       [(ngModel)]="queryText"
       showClearButton="always"
+      placeholder="{{ 'search.search_bar.placeholder' | translate }}"
     >
     </ion-searchbar>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <div
+    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
+  >
+    <ion-label class="centeredMessageContainer">
+      {{ 'search.instruction' | translate }}
+    </ion-label>
+  </div>
   <stapps-data-list
     id="data-list"
     [items]="items | async"
     [singleType]="singleTypeResponse"
     (loadmore)="loadMore()"
     [resetToTop]="queryChanged.asObservable()"
+    [loading]="loading"
   ></stapps-data-list>
 </ion-content>

src/app/modules/data/types/catalog/catalog-detail-content.component.ts

@@ -35,6 +35,7 @@ export class CatalogDetailContentComponent
   }
 
   initialize() {
+    this.showDefaultData = true;
     this.pageSize = 100;
 
     const nameSort: SCDucetSort = {