Fix choppiness when opening and showing organisation and system property filter controls

Author: costas80

gitb-ui/ui/src/app/components/base-conformance-item-display/base-conformance-item-display.component.ts

@@ -90,6 +90,10 @@ export abstract class BaseConformanceItemDisplayComponent extends BaseComponent
   showExport = false
   updatePending = false
   exportPending = false
+  /** Whether the list view's embedded filter is still loading its organisation/system custom
+   * properties - bound to the external "Filter..." button's [pending] so the filter icon
+   * turns into a spinner (the embedded filter's own header/pending icon isn't rendered). */
+  filterLoading = false
   organisationId?: number
   communityId?: number
   listView = false
@@ -202,6 +206,12 @@ export abstract class BaseConformanceItemDisplayComponent extends BaseComponent
     })
   }
 
+  onFilterLoading(pending: boolean) {
+    setTimeout(() => {
+      this.filterLoading = pending
+    })
+  }
+
   loadConformanceStatementsForListViewFactory() {
     return (this.loadConformanceStatementsForListView).bind(this)
   }

gitb-ui/ui/src/app/components/conformance-statement-table/conformance-statement-table.component.html

@@ -5,7 +5,8 @@
                  [organisationId]="organisationId"
                  [snapshotId]="snapshotId"
                  [initialFilters]="initialFilters"
-                 (onApply)="getConformanceStatements()"></app-test-filter>
+                 (onApply)="getConformanceStatements()"
+                 (loadingStatus)="filterLoading.emit($event)"></app-test-filter>
 <div class="table-container rounded">
     <table class="table table-directive">
         <thead>

gitb-ui/ui/src/app/components/conformance-statement-table/conformance-statement-table.component.ts

@@ -51,6 +51,10 @@ export class ConformanceStatementTableComponent extends BaseComponent implements
   @Output() exportChange = new EventEmitter<boolean>()
   @Output() searchChange = new EventEmitter<boolean>()
   @Output() communityChange = new EventEmitter<number|undefined>()
+  /** Forwards the embedded test-filter's custom-property loading status, so the external
+   * "Filter..." button can show loading feedback (the embedded filter's own header/pending
+   * icon is not rendered). */
+  @Output() filterLoading = new EventEmitter<boolean>()
   @Output() select = new EventEmitter<ConformanceResultFullWithTestSuites>
   @ViewChild("pagingControls") pagingControls?: PagingControlsApi
   @ViewChildren("testStatusDisplay") testStatusDisplay?: QueryList<TestStatusBaseApi>

gitb-ui/ui/src/app/components/filter-control/filter-control.component.html

@@ -1,6 +1,6 @@
 @if (showRefresh || showClear) {
     <div class="btn-group" ngbDropdown>
-        <button type="button" [labelIcon]="Constants.BUTTON_ICON.FILTER" class="btn btn-secondary" (click)="doToggle()">Filter...</button>
+        <button type="button" [labelIcon]="Constants.BUTTON_ICON.FILTER" class="btn btn-secondary" [pending]="pending" (click)="doToggle()">Filter...</button>
         <button id="button-filters" type="button" ngbDropdownToggle class="btn btn-secondary dropdown-toggle dropdown-toggle-split">
             <span class="caret"></span>
             <span class="sr-only visually-hidden">Search</span>

gitb-ui/ui/src/app/components/filter-control/filter-control.component.ts

@@ -26,6 +26,10 @@ export class FilterControlComponent implements FilterControlApi {
 
   @Input() showRefresh = true
   @Input() showClear = true
+  /** Whether the filter data backing the panel (e.g. custom properties) is still loading -
+   * shows a spinner in place of the filter icon on the main toggle button, matching other
+   * buttons' [pending] behaviour. */
+  @Input() pending = false
   @Output() toggle = new EventEmitter<boolean>();
   @Output() refresh = new EventEmitter<void>();
   @Output() clear = new EventEmitter<void>();

gitb-ui/ui/src/app/components/test-filter/test-filter.component.ts

@@ -83,6 +83,11 @@ export class TestFilterComponent implements OnInit, AfterViewInit {
   @Input() loadSystemPropertiesFn?: (_: number) => Observable<SystemParameter[]>
 
   @Output() onApply = new EventEmitter<any>()
+  /** Emitted while the organisation/system custom properties (needed before the panel can
+   * expand) are being loaded - lets an embedding parent (e.g. the conformance dashboard's
+   * external "Filter..." button) show its own loading feedback, given that in embedded mode
+   * this component's own header (and pending icon) isn't rendered. */
+  @Output() loadingStatus = new EventEmitter<boolean>()
 
   @ViewChild("commentFilter") commentFilterComponent?: TextFilterComponentApi
 
@@ -509,8 +514,9 @@ export class TestFilterComponent implements OnInit, AfterViewInit {
     } else {
       this.applicableCommunityId = undefined
     }
+    this.loadingStatus.emit(true)
     this.resetCustomProperties().subscribe(() => {
-      this.initialised = true
+      this.completeInitialisation()
     })
     if (update.applyFilters) {
       this.applyFilters()
@@ -694,16 +700,41 @@ export class TestFilterComponent implements OnInit, AfterViewInit {
 
   clickedHeader() {
     this.showFiltering = !this.showFiltering
-    if (this.showFiltering) {
+    if (this.showFiltering && this.initialised) {
+      // Already loaded - the panel expands right away, so drop the header's "collapsed"
+      // (rounded-corner) styling in step with it. If not yet initialised, this is instead
+      // done from completeInitialisation() once the panel is actually about to expand -
+      // see the comment there for why this must not happen earlier.
       this.toggleFilterCollapsedFinished(false)
     }
     if (!this.initialised) {
+      this.loadingStatus.emit(true)
       this.resetCustomProperties().subscribe(() => {
-        this.initialised = true
+        this.completeInitialisation()
       })
     }
   }
 
+  /** Marks the panel as ready to expand, deferred to a follow-up macrotask so that the
+   * organisation/system property fields (whose visibility is set by resetCustomProperties(),
+   * just completed) have already rendered into the still-collapsed panel on this tick.
+   * Flipping "initialised" (and so [ngbCollapse]) in the same cycle as their first render
+   * makes ngbCollapse measure a stale (too short) target height, so the fields pop in
+   * mid-animation instead of the panel expanding in one smooth motion. The header's
+   * "collapsed" styling (filterCollapsedFinished) must flip in this same step rather than
+   * immediately on click - otherwise the header's rounded corners change well before the
+   * panel actually starts expanding, which is its own visible pop disconnected from the
+   * expand animation. */
+  private completeInitialisation() {
+    setTimeout(() => {
+      this.initialised = true
+      this.loadingStatus.emit(false)
+      if (this.showFiltering) {
+        this.toggleFilterCollapsedFinished(false)
+      }
+    })
+  }
+
   private resetCustomProperties(): Observable<boolean> {
     if (this.applicableCommunityId != undefined && this.filterDefined(Constants.FILTER_TYPE.ORGANISATION_PROPERTY) && this.filterDefined(Constants.FILTER_TYPE.SYSTEM_PROPERTY)) {
       const obs1 = this.loadOrganisationProperties(this.applicableCommunityId)

gitb-ui/ui/src/app/pages/admin/conformance-dashboard/conformance-dashboard.component.html

@@ -4,7 +4,7 @@
             <div class="card-title">Conformance statements</div>
             <div class="btn-toolbar allStatementControls">
                 @if (listView) {
-                    <app-filter-control #filterControl (toggle)="toggleFilters()" (refresh)="refreshFilters()" (clear)="clearFilters()"></app-filter-control>
+                    <app-filter-control #filterControl [pending]="filterLoading" (toggle)="toggleFilters()" (refresh)="refreshFilters()" (clear)="clearFilters()"></app-filter-control>
                     @if (showExport) {
                         <button type="button" [labelIcon]="Constants.BUTTON_ICON.REPORT_CSV" class="btn btn-secondary"  (click)="onExportConformanceStatementsAsCsv()" [pending]="exportPending">Export CSV</button>
                     }
@@ -175,6 +175,7 @@
                                              (communityChange)="listViewCommunityChange($event)"
                                              (searchChange)="listViewSearching($event)"
                                              (exportChange)="listViewExportChange($event)"
+                                             (filterLoading)="onFilterLoading($event)"
                                              (select)="onStatementSelectFromListView($event)"></app-conformance-statement-table>
         }
     </div>

gitb-ui/ui/src/app/pages/organisation/conformance-statements/conformance-statements.component.html

@@ -4,7 +4,7 @@
 			<div class="card-title">Conformance statements</div>
             <div class="btn-toolbar">
                 @if (listView) {
-                    <app-filter-control #filterControl (toggle)="toggleFilters()" (refresh)="refreshFilters()" (clear)="clearFilters()"></app-filter-control>
+                    <app-filter-control #filterControl [pending]="filterLoading" (toggle)="toggleFilters()" (refresh)="refreshFilters()" (clear)="clearFilters()"></app-filter-control>
                     @if (showExport) {
                         <button type="button" [labelIcon]="Constants.BUTTON_ICON.REPORT_CSV" class="btn btn-secondary" (click)="onExportConformanceStatementsAsCsv()" [pending]="exportPending">Export CSV</button>
                     }
@@ -156,6 +156,7 @@
                                              [initialPaging]="restoredListViewPaging"
                                              (searchChange)="listViewSearching($event)"
                                              (exportChange)="listViewExportChange($event)"
+                                             (filterLoading)="onFilterLoading($event)"
                                              (select)="onStatementSelectFromListView($event)"></app-conformance-statement-table>
         }
 		@if (showBack) {