[Grids]: ESF loading indicator is shown at the bottom of the value list instead of the center

[viktorkombov]

Description

When the Excel-style filtering (ESF) loads column values on demand with uniqueColumnValuesStrategy, the loading indicator is drawn at the bottom of the value list, right above the Cancel and Apply buttons. It should be in the middle of the list. This happens on the first open and on every reopen, in igx-grid, igx-tree-grid and igx-hierarchical-grid.

This is separate from the empty value list on reopen: it needs no scrolling and no reuse of the ESF.

22.2 added a rule that makes igx-virtual-scroll fill the height of the list:

igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss

Lines 194 to 198 in 66c09a8

	// The scrolling viewport takes the height the list has left, not its content.
	igx-virtual-scroll {
	flex: 1 1 auto;
	min-height: 0;
	}

While values load, the list is in its empty state, which centers its content:

igniteui-angular/projects/igniteui-angular/list/src/list/themes/_base.scss

Lines 45 to 47 in 66c09a8

	@include m(empty) {
	justify-content: center;
	align-items: center;

The loading template is rendered after the projected content, as a sibling of the empty virtual scroll:

igniteui-angular/projects/igniteui-angular/list/src/list/list.component.html

Lines 15 to 18 in 66c09a8

	@if (!children || children.length === 0 || isLoading) {
	<ng-container *ngTemplateOutlet="template; context: context">
	</ng-container>
	}

The empty virtual scroll now takes all the free height of the list, so there is nothing left to center and the loading template is pushed to the bottom. In 22.1.x the projected content was a zero-height wrapper around igxFor, so the loading template was the only element with height and was centered:

igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.html

Lines 39 to 66 in ef6ba51

	<div style="overflow: hidden; position: relative">
	<igx-list-item
	[class.igx-list__item-base--active]="
	focusedItem?.id === this.getItemId(i)
	"
	[attr.id]="getItemId(i)"
	role="option"
	*igxFor="
	let item of displayedListData;
	index as i;
	scrollOrientation: 'vertical';
	containerSize: containerSize;
	itemSize: itemSize
	"
	>
	<igx-checkbox
	[value]="item"
	[tabindex]="-1"
	[checked]="$safeNavigationMigration(item?.isSelected)"
	[disableRipple]="true"
	[indeterminate]="$safeNavigationMigration(item?.indeterminate)"
	[disableTransitions]="true"
	(change)="onCheckboxChange($event)"
	>
	{{ item.label }}
	</igx-checkbox>
	</igx-list-item>
	</div>

Measured in Chrome at 1400x1000 in the grid sample: the list is 197 px tall, the empty virtual scroll takes 157 px of it, and the indicator's center is 79 px below the center of the list. Setting flex: 0 0 auto on igx-virtual-scroll in DevTools puts the indicator back in the center.

Framework

Angular

Angular Version

22.1.3

Ignite UI for Angular Version

22.2.0-rc.1

Component / Area

Grid

Browser

Chrome

Operating System

Windows

Command Not Working

Steps to Reproduce

1. Open the following smaple: https://stackblitz.com/edit/hjxaqbed?file=src%2Fapp%2Fapp.component.html
2. Click the column menu icon (three dots) in the CompanyName column header.
3. Watch the value list while the values load.

Actual Result

The loading indicator sits at the bottom of the value list, directly above Cancel and Apply. The rest of the list area is empty.

Expected Result

The loading indicator is centered in the value list, as in 22.1.x.

Reproduction URL

No response

Attachments

No response