Search bar does not update with "no results found" when using external filtering

[ad9242]

Summary of the bug

When using external filtering with ic-search-bar, the suggestions do not update with "No results found" when passing an empty array as the options prop, if there have previously been options supplied. This is causing a problem on the guidance site.

🪜 How to reproduce

Using the following code:

1. type ca into the search bar - suggestions will be shown
2. now type "z" to make text "caz", it still shows the previous suggestion options

🧐 Expected behaviour

The search bar should display "No results found" when given an empty array as options.

📸 Screenshots or code

<ic-search-bar  label="Search for coffee" placeholder="Type to search" debounce="300" disable-filter="true" id="external-filter-search"
  ></ic-search-bar>
  <br />
  <ic-typography
    >Suggested search options: Espresso, Double Espresso, Flat White,
    Cappuccino, Americano, Mocha</ic-typography
  >
  <br />
  <ic-typography
    >The IcChange event will trigger 300ms after you finish typing. 1
    second later, the options in the searchbar menu will be
    updated.</ic-typography
  >
  <script>
    var mockData = [
      { label: "Espresso", value: "espresso" },
      { label: "Double Espresso", value: "doubleespresso" },
      { label: "Flat White", value: "flatwhite" },
      { label: "Cappuccino", value: "cappucino" },
      { label: "Americano", value: "americano" },
      { label: "Mocha", value: "mocha" },
    ];
    var select = document.querySelector("#external-filter-search");
    var optionSelected = false;
    function handleFilter(event) {
      query = event.detail.value;
      if (query !== optionSelected) {
        if (query.length > 0) {
          mockAPI = (query) => {
            filteredResults = mockData.filter((m) =>
              m.label.toLowerCase().includes(query.toLowerCase())
            );
            return new Promise((resolve) =>
              setTimeout(
                () => resolve(filteredResults),
                event.type === "icChange" ? 2000 : 1000
              )
            );
          };
          mockAPI(query).then((results) => (select.options = results));
        } else {
          select.options = [];
        }
      }
      optionSelected = "";
    }
    function handleSelect(event) {
      optionSelected = true;
    }
    select.addEventListener("icOptionSelect", handleSelect);
    select.addEventListener("icChange", handleFilter);
    select.addEventListener("icRetryLoad", handleFilter);
  </script>

Additional info

Think this may have been introduced and is masked by the loading state work. Seems to be related to the preLoad variable being true which is preventing the no results text being set.

We should maybe add a story into storybook without the loading state but with external filtering