chore(demo): improve visual feedback on empty results

Closes #126

Enhance the feedback for the empty search results page in the demo:

- Displays "Enter Something to search" instead of "No results" when the results container is empty.
- When a search is performed and there are no results, the icon changes and the text
  "No results" is displayed.

demo/scss/search.scss

@@ -38,9 +38,16 @@
 
 .results-container:empty:after {
   font-family: var(--font-sans);
-  content: "No results";
+  content: "Enter Something to search";
 }
 
 .results-container:empty:before {
   font-size: var(--size-9);
 }
+
+.results-container.no-results:empty {
+  @include material-icon('do_not_disturb_alt');
+  &:after {
+    content: "No results";
+  }
+}

demo/src/search/search-page.js

@@ -195,15 +195,25 @@ class SearchPage {
       const data = await ilProvider.search(bu, query, signal);
 
       this.#fetchNextPage = data.next;
-      this.#resultsEl.replaceChildren(...this.createResultsEl(data.results));
-      this.#resultsEl.classList.add('fade-in');
+      this.#updateResults(data.results);
       this.initIntersectionObserver();
       this.initScrollToTopButton();
     } finally {
       spinner.remove();
     }
   }
 
+  /**
+   * Updates the results in the page.
+   *
+   * @param results {{ title: string, urn: string }[]} the results.
+   */
+  #updateResults(results) {
+    this.#resultsEl.replaceChildren(...this.createResultsEl(results));
+    this.#resultsEl.classList.add('fade-in');
+    this.#resultsEl.classList.toggle('no-results', results.length === 0);
+  }
+
   /**
    * Clear the search results and intersection observer and aborts any ongoing search query.
    *
@@ -219,6 +229,7 @@ class SearchPage {
     this.#intersectionObserverComponent?.remove();
     this.#intersectionObserverComponent = null;
     this.#resultsEl.replaceChildren();
+    this.#resultsEl.classList.toggle('no-results', false);
 
     return signal;
   }
@@ -308,9 +319,9 @@ class SearchPage {
   /**
    * Creates and returns HTML elements for the search results based on the provided results data.
    *
-   * @param {Object[]} results - An array of search results.
+   * @param {{ title: string, urn: string }[]} results - An array of search results.
    *
-   * @returns {HTMLElement[]} - An array of HTML elements representing the search results.
+   * @returns {NodeListOf<ChildNode>} - An array of HTML elements representing the search results.
    */
   createResultsEl(results) {
     return parseHtml(results.map((r) => {