Added request loader component (#2915)

### Fixes #
<!-- Mention the issues this PR addresses -->

### Checks

- [ ] Ran `yarn test-build`
- [ ] Updated relevant documentations
- [ ] Updated matching config options in altair-static

### Changes proposed in this pull request:
<!-- Describe the changes being introduced in this PR -->

## Summary by Sourcery

Introduce a request loader component and corresponding store logic to
track and display the full request lifecycle (pre-request, auth, query,
post-request) per window, updating QueryService to dispatch progress
actions and embedding the loader UI into existing components

New Features:
- Add RequestLoaderComponent to display per-window request loading
progress in the UI
- Introduce NGRX actions, reducer cases, and selectors to manage
temporary window loading request state entries

Enhancements:
- Refactor QueryService to sequence pre-request scripts, authorization,
query, and post-request transforms with loading state dispatches
- Integrate the request loader into UrlBoxComponent and WindowComponent
and wire it to the store
- Extend the icon set with a dashed circle icon for pending states

Tests:
- Update WindowComponent spec to initialize the new
temporaryWindowStates slice

Chores:
- Add SCSS styles for the request-loader component and include them in
global stylesheet
- Adjust font sizing in editor and URL box loader z-index for visual
consistency

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Request loading indicator added to show per-request progress (pending,
active, done, error) including pre-/post-request and auth steps;
surfaced in the URL bar and window UI.

* **Improvements**
* Loading indicators tied to request lifecycle (accurate handling for
subscriptions vs. non-subscriptions) and per-window tracking.

* **Style**
* Added overlay styles for the loader; tightened URI font and adjusted
URL-box layering.

* **Tests**
  * Unit tests added for the request loader component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: imolorhe

packages/altair-app/src/app/modules/altair/components/components.module.ts

@@ -54,6 +54,7 @@ import { BannerComponent } from './banner/banner.component';
 import { BannerContainerComponent } from './banner-container/banner-container.component';
 import { HeadersEditorComponent } from './headers-editor/headers-editor.component';
 import { WindowSwitcherItemComponent } from './window-switcher-item/window-switcher-item.component';
+import { RequestLoaderComponent } from './request-loader/request-loader.component';
 
 // const STANDALONE_COMPONENTS = [];
 const COMPONENTS = [
@@ -103,6 +104,7 @@ const COMPONENTS = [
   AuthorizationOauth2Component,
   BannerComponent,
   BannerContainerComponent,
+  RequestLoaderComponent,
 ];
 
 @NgModule({

packages/altair-app/src/app/modules/altair/components/request-loader/request-loader.component.html

@@ -0,0 +1,39 @@
+@if (isLoading() && requestState().length > 1) {
+  <div class="request-loader">
+    <ul class="request-loader__items">
+      @for (item of requestState(); track item.id) {
+        <li
+          class="request-loader__item"
+          [ngClass]="{
+            'request-loader__item--active': item.state === 'active',
+            'request-loader__item--done': item.state === 'done',
+            'request-loader__item--pending': item.state === 'pending',
+            'request-loader__item--error': item.state === 'error',
+          }"
+        >
+          <div
+            class="request-loader__item-icon"
+            nz-tooltip
+            [nzTooltipTitle]="item.name"
+          >
+            @switch (item.state) {
+              @case ('done') {
+                <app-icon name="check" />
+              }
+              @case ('error') {
+                <app-icon name="x" />
+              }
+              @case ('active') {
+                <app-icon name="loader" class="anim anim-rotate" />
+              }
+              @default {
+                <app-icon name="circle-dashed" />
+              }
+            }
+          </div>
+          <div class="request-loader__item-text">{{ item.name }}</div>
+        </li>
+      }
+    </ul>
+  </div>
+}

packages/altair-app/src/app/modules/altair/components/request-loader/request-loader.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequestLoaderComponent } from './request-loader.component';
+
+describe('RequestLoaderComponent', () => {
+  let component: RequestLoaderComponent;
+  let fixture: ComponentFixture<RequestLoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RequestLoaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RequestLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/altair-app/src/app/modules/altair/components/request-loader/request-loader.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LoadingRequestStateEntry } from 'altair-graphql-core/build/types/state/local.interfaces';
+
+@Component({
+  selector: 'app-request-loader',
+  standalone: false,
+  templateUrl: './request-loader.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RequestLoaderComponent {
+  readonly requestState = input<LoadingRequestStateEntry[]>([]);
+  readonly isLoading = input(false);
+}

packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts

@@ -7,6 +7,7 @@ import {
   signal,
   inject,
   output,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { FormControl, NonNullableFormBuilder, Validators } from '@angular/forms';
 import { Team } from 'altair-graphql-core/build/types/state/account.interfaces';
@@ -22,6 +23,7 @@ import * as windowsMetaActions from '../../store/windows-meta/windows-meta.actio
   templateUrl: './teams-dialog.component.html',
   styles: [],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TeamsDialogComponent {
   private readonly accountService = inject(AccountService);
@@ -76,9 +78,16 @@ export class TeamsDialogComponent {
         this.membersOfSelectedTeam.set([]);
         return;
       }
-      this.membersOfSelectedTeam.set(
-        (await this.accountService.getTeamMembers(selectedTeamId)) || []
-      );
+      try {
+        this.membersOfSelectedTeam.set(
+          (await this.accountService.getTeamMembers(selectedTeamId)) || []
+        );
+      } catch (err) {
+        this.notifyService.errorWithError(
+          await getErrorResponse(err),
+          'Could not load team members'
+        );
+      }
     });
 
     effect(() => {
@@ -94,8 +103,15 @@ export class TeamsDialogComponent {
 
   async onDeleteTeam(id: string) {
     if (confirm('Are you sure you want to delete this team?')) {
-      await this.accountService.deleteTeam(id);
-      this.reloadTeamChange.emit();
+      try {
+        await this.accountService.deleteTeam(id);
+        this.reloadTeamChange.emit();
+      } catch (err) {
+        this.notifyService.errorWithError(
+          await getErrorResponse(err),
+          'Could not delete team'
+        );
+      }
     }
   }
 

packages/altair-app/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap

@@ -66,6 +66,7 @@ exports[`UrlBoxComponent should render correctly 1`] = `
         track-id="set_url"
       />
       
+      <app-request-loader />
     </div>
     <div
       class="url-box__input-actions"
@@ -217,6 +218,7 @@ exports[`UrlBoxComponent should render correctly with queryOperations > 1 1`] =
         track-id="set_url"
       />
       
+      <app-request-loader />
     </div>
     <div
       class="url-box__input-actions"

packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.html

@@ -57,6 +57,7 @@
       (blurChange)="setApiUrl()"
       (submitChange)="setApiUrl()"
     />
+    <app-request-loader [requestState]="requestState()" [isLoading]="isLoading()" />
   </div>
   <div class="url-box__input-actions">
     @if (currentCollection()) {

packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts

@@ -12,6 +12,7 @@ import {
 } from 'altair-graphql-core/build/types/state/query.interfaces';
 import { OperationDefinitionNode } from 'graphql';
 import { BATCHED_REQUESTS_OPERATION } from '../../services/gql/gql.service';
+import { LoadingRequestStateEntry } from 'altair-graphql-core/build/types/state/local.interfaces';
 
 @Component({
   selector: 'app-url-box',
@@ -31,6 +32,7 @@ export class UrlBoxComponent {
   readonly currentCollection = input<IQueryCollection>();
   readonly hasUnsavedChanges = input(false);
   readonly windowId = input('');
+  readonly requestState = input<LoadingRequestStateEntry[]>([]);
 
   readonly toggleDocsChange = output();
   readonly reloadDocsChange = output();

packages/altair-app/src/app/modules/altair/containers/window/window.component.html

@@ -11,6 +11,7 @@
     [currentCollection]="currentCollection$ | async"
     [hasUnsavedChanges]="hasUnsavedChanges$ | async"
     [windowId]="windowId()"
+    [requestState]="loadingRequestState$ | async"
     (urlChange)="setApiUrl($event)"
     (httpVerbChange)="setApiMethod($event)"
     (sendRequest)="sendRequest()"

packages/altair-app/src/app/modules/altair/containers/window/window.component.spec.ts

@@ -39,6 +39,7 @@ describe('WindowComponent', () => {
         installedPlugins: {},
         panels: [],
         uiActions: [],
+        temporaryWindowStates: {},
       },
       collection: {
         activeCollection: undefined,