fix(ui): defer select options and omit unused selection tags

packages/ui/components/AdvancedSelect.wrn

@@ -304,7 +304,7 @@ component AdvancedSelect {
               aria-label="{selectedOptionsLabel}"
               data-show="multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' && selectedCount() > 0"
             >
-              {#each allOptions() as option}
+              {#each multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' ? selectedOptions() : [] as option}
                 <span data-show="isSelected(option)">
                   {#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
                   {#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
@@ -371,7 +371,7 @@ component AdvancedSelect {
               role="listbox"
               aria-multiselectable="{multiple}"
             >
-              {#each groups as group}
+              {#each open ? groups : [] as group}
                 {#if visibleOptions(group.options || []).length}
                   <div class="wrn-next__option-group" role="group" aria-label="{group.label}">
                     <div class="wrn-next__group-label">{group.label}</div>
@@ -402,7 +402,7 @@ component AdvancedSelect {
                 {/if}
               {/each}
 
-              {#each visibleOptions(options) as option}
+              {#each open ? visibleOptions(options) : [] as option}
                 <button
                   type="button"
                   class="wrn-next__select-option {isSelected(option) ? 'wrn-next__select-option--selected' : ''} {optionIndex(option) === activeIndex ? 'wrn-next__select-option--active' : ''}"