This is an automated email from the ASF dual-hosted git repository.
JHoelli pushed a commit to branch 4716-add-loading-banner-for-asset-links
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/4716-add-loading-banner-for-asset-links by this push:
new 192e0b8fc6 alert banner
192e0b8fc6 is described below
commit 192e0b8fc675278bb0bac43eeb1854a18f2e9ecc
Author: Jacqueline Höllig <[email protected]>
AuthorDate: Mon Jul 13 06:00:55 2026 +0000
alert banner
---
.../asset-link-table.component.html | 204 ++++++-----
.../asset-link-table/asset-link-table.component.ts | 5 +
.../view-asset-links.component.html | 13 +
.../view-asset-links/view-asset-links.component.ts | 2 +
.../asset-link-table.component.html | 390 +++++++++++----------
.../asset-link-table/asset-link-table.component.ts | 5 +
.../manage-asset-links-dialog.component.html | 1 +
.../manage-asset-links-dialog.component.ts | 2 +
8 files changed, 338 insertions(+), 284 deletions(-)
diff --git
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.html
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.html
index da7295734b..2d855fb596 100644
---
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.html
+++
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.html
@@ -17,101 +17,115 @@
-->
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-table
- fxFlex="100"
- [columns]="displayedColumns"
- [dataSource]="dataSource"
- [showActionsMenu]="true"
- [rowsClickable]="true"
- (rowClicked)="openDetails($event)"
- data-cy="all-adapters-table"
- matSort
- >
- <ng-container matColumnDef="type">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>
- {{ 'Type' | translate }}
- </th>
- <td mat-cell *matCellDef="let assetLink">
- <div
- fxLayout="column"
- fxLayoutAlign="start start"
- class="truncate"
- >
- <sp-asset-link-table-type
- [assetLink]="assetLink"
- [assetLinkTypes]="assetLinkTypes"
- class="mt-sm mb-sm"
- >
- </sp-asset-link-table-type>
- </div>
- </td>
- </ng-container>
- <ng-container matColumnDef="linkLabel">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>
- {{ 'Name' | translate }}
- </th>
- <td
- mat-cell
- *matCellDef="let assetLink"
- data-cy="asset-links-table"
+ <div fxFlex="100" fxLayout="column" fxLayoutGap="8px">
+ @if (loading) {
+ <sp-alert-banner
+ type="info"
+ icon="hourglass_empty"
+ [title]="'Loading linked resources' | translate"
+ [description]="
+ 'This can take a moment while Streampipes gathers the
available assets.'
+ | translate
+ "
+ ></sp-alert-banner>
+ } @else {
+ <sp-table
+ fxFlex="100"
+ [columns]="displayedColumns"
+ [dataSource]="dataSource"
+ [showActionsMenu]="true"
+ [rowsClickable]="true"
+ (rowClicked)="openDetails($event)"
+ data-cy="all-adapters-table"
+ matSort
>
- <div
- fxLayout="column"
- fxLayoutAlign="start start"
- class="truncate"
- >
- <span>{{ assetLink.linkLabel }}</span>
- </div>
- </td>
- </ng-container>
- <ng-container matColumnDef="additionalInfo">
- <th mat-header-cell *matHeaderCellDef>Info</th>
- <td mat-cell *matCellDef="let assetLink">
- <sp-asset-link-table-additional-data
- [isAdminUser]="isAdminUser"
- [assetLink]="assetLink"
- [certificates]="certificates"
- >
- </sp-asset-link-table-additional-data>
- </td>
- </ng-container>
+ <ng-container matColumnDef="type">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Type' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let assetLink">
+ <div
+ fxLayout="column"
+ fxLayoutAlign="start start"
+ class="truncate"
+ >
+ <sp-asset-link-table-type
+ [assetLink]="assetLink"
+ [assetLinkTypes]="assetLinkTypes"
+ class="mt-sm mb-sm"
+ >
+ </sp-asset-link-table-type>
+ </div>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="linkLabel">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Name' | translate }}
+ </th>
+ <td
+ mat-cell
+ *matCellDef="let assetLink"
+ data-cy="asset-links-table"
+ >
+ <div
+ fxLayout="column"
+ fxLayoutAlign="start start"
+ class="truncate"
+ >
+ <span>{{ assetLink.linkLabel }}</span>
+ </div>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="additionalInfo">
+ <th mat-header-cell *matHeaderCellDef>Info</th>
+ <td mat-cell *matCellDef="let assetLink">
+ <sp-asset-link-table-additional-data
+ [isAdminUser]="isAdminUser"
+ [assetLink]="assetLink"
+ [certificates]="certificates"
+ >
+ </sp-asset-link-table-additional-data>
+ </td>
+ </ng-container>
- <ng-template spTableActions let-element>
- <button
- mat-menu-item
- data-cy="details-asset-link"
- [disabled]="!hasFeatureCard(element.linkType)"
- (click)="openDetails(element)"
- >
- <mat-icon>visibility</mat-icon>
- <span>{{ 'Details' | translate }}</span>
- </button>
- <button
- mat-menu-item
- data-cy="navigate-asset-link"
- (click)="navigate(element)"
- >
- <mat-icon>open_in_new</mat-icon>
- <span>{{ 'Navigate' | translate }}</span>
- </button>
- @if (editMode) {
- <button
- mat-menu-item
- data-cy="edit-asset-link"
- (click)="openEditAssetLinkDialog(element)"
- >
- <mat-icon>edit</mat-icon>
- <span>{{ 'Edit' | translate }}</span>
- </button>
- <button
- mat-menu-item
- data-cy="delete-asset-link"
- (click)="deleteAssetLink(element)"
- >
- <mat-icon>delete</mat-icon>
- <span>{{ 'Delete' | translate }}</span>
- </button>
- }
- </ng-template>
- </sp-table>
+ <ng-template spTableActions let-element>
+ <button
+ mat-menu-item
+ data-cy="details-asset-link"
+ [disabled]="!hasFeatureCard(element.linkType)"
+ (click)="openDetails(element)"
+ >
+ <mat-icon>visibility</mat-icon>
+ <span>{{ 'Details' | translate }}</span>
+ </button>
+ <button
+ mat-menu-item
+ data-cy="navigate-asset-link"
+ (click)="navigate(element)"
+ >
+ <mat-icon>open_in_new</mat-icon>
+ <span>{{ 'Navigate' | translate }}</span>
+ </button>
+ @if (editMode) {
+ <button
+ mat-menu-item
+ data-cy="edit-asset-link"
+ (click)="openEditAssetLinkDialog(element)"
+ >
+ <mat-icon>edit</mat-icon>
+ <span>{{ 'Edit' | translate }}</span>
+ </button>
+ <button
+ mat-menu-item
+ data-cy="delete-asset-link"
+ (click)="deleteAssetLink(element)"
+ >
+ <mat-icon>delete</mat-icon>
+ <span>{{ 'Delete' | translate }}</span>
+ </button>
+ }
+ </ng-template>
+ </sp-table>
+ }
+ </div>
</div>
diff --git
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.ts
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.ts
index 8507749a56..5b6bb1d4e3 100644
---
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.ts
+++
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/asset-link-table/asset-link-table.component.ts
@@ -52,6 +52,7 @@ import {
PanelType,
SpTableActionsDirective,
SpTableComponent,
+ SpAlertBannerComponent,
} from '@streampipes/shared-ui';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { Router } from '@angular/router';
@@ -88,6 +89,7 @@ import { MatIcon } from '@angular/material/icon';
SpTableActionsDirective,
MatMenuItem,
MatIcon,
+ SpAlertBannerComponent,
TranslatePipe,
],
})
@@ -106,6 +108,9 @@ export class AssetLinkTableComponent
@Input()
editMode = false;
+ @Input()
+ loading = false;
+
@ViewChild(MatSort)
sort: MatSort;
diff --git
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.html
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.html
index 48eceaf516..e804977bf5 100644
---
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.html
+++
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.html
@@ -34,14 +34,27 @@
}
</div>
@if (
+ !assetLinkTypesLoading &&
assetLinkTypes.length > 0 &&
selectedAsset.assetLinks?.length > 0
) {
<sp-asset-link-table
[asset]="selectedAsset"
[assetLinkTypes]="assetLinkTypes"
+ [loading]="assetLinkTypesLoading"
>
</sp-asset-link-table>
+ } @else if (assetLinkTypesLoading) {
+ <sp-alert-banner
+ type="info"
+ icon="hourglass_empty"
+ [title]="'Loading linked resources' | translate"
+ [description]="
+ 'This can take a moment while Streampipes gathers the
available assets.'
+ | translate
+ "
+ >
+ </sp-alert-banner>
} @else {
<sp-alert-banner
type="info"
diff --git
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.ts
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.ts
index 71766b1de2..a8bd62dab9 100644
---
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.ts
+++
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-links/view-asset-links.component.ts
@@ -52,6 +52,7 @@ export class ViewAssetLinksComponent implements OnInit {
selectedAsset: SpAsset;
assetLinkTypes: AssetLinkType[] = [];
+ assetLinkTypesLoading = true;
private genericStorageService = inject(GenericStorageService);
@@ -60,6 +61,7 @@ export class ViewAssetLinksComponent implements OnInit {
.getAllDocuments(AssetConstants.ASSET_LINK_TYPES_DOC_NAME)
.subscribe(res => {
this.assetLinkTypes = res;
+ this.assetLinkTypesLoading = false;
});
}
}
diff --git
a/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.html
b/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.html
index 5b92b8924c..ab52829ff1 100644
---
a/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.html
+++
b/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.html
@@ -17,210 +17,222 @@
-->
<div fxLayout="column" fxLayoutGap="8px">
- <div
- fxLayout="row wrap"
- fxLayoutAlign="end center"
- fxLayoutGap="8px"
- class="asset-link-table-toolbar"
- >
- <button
- mat-flat-button
- class="mat-basic"
- data-cy="asset-link-table-select-all"
- [disabled]="!hasUnselectedFilteredResources()"
- (click)="selectAll()"
- >
- <mat-icon>queue</mat-icon>
- {{ 'Select all' | translate }}
- </button>
- <button
- mat-flat-button
- class="mat-basic"
- data-cy="asset-link-table-deselect-all"
- [disabled]="!hasSelectedFilteredResources()"
- (click)="deselectAll()"
+ @if (resourcesLoading) {
+ <sp-alert-banner
+ type="info"
+ icon="hourglass_empty"
+ [title]="'Loading linked resources' | translate"
+ [description]="
+ 'This can take a moment while Streampipes gathers the
available assets.'
+ | translate
+ "
+ ></sp-alert-banner>
+ } @else {
+ <div
+ fxLayout="row wrap"
+ fxLayoutAlign="end center"
+ fxLayoutGap="8px"
+ class="asset-link-table-toolbar"
>
- <mat-icon>filter_none</mat-icon>
- {{ 'Deselect all' | translate }}
- </button>
+ <button
+ mat-flat-button
+ class="mat-basic"
+ data-cy="asset-link-table-select-all"
+ [disabled]="!hasUnselectedFilteredResources()"
+ (click)="selectAll()"
+ >
+ <mat-icon>queue</mat-icon>
+ {{ 'Select all' | translate }}
+ </button>
+ <button
+ mat-flat-button
+ class="mat-basic"
+ data-cy="asset-link-table-deselect-all"
+ [disabled]="!hasSelectedFilteredResources()"
+ (click)="deselectAll()"
+ >
+ <mat-icon>filter_none</mat-icon>
+ {{ 'Deselect all' | translate }}
+ </button>
- <mat-form-field class="form-field-small asset-link-table-search">
- <mat-icon matPrefix>search</mat-icon>
- <input
- #searchInput
- matInput
- [placeholder]="'Search' | translate"
- [value]="searchTerm"
- (input)="updateSearch($any($event.target).value)"
- />
- @if (searchTerm) {
- <button
- mat-icon-button
- matSuffix
- type="button"
- [attr.aria-label]="'Clear search' | translate"
- (click)="clearSearch()"
- >
- <mat-icon>close</mat-icon>
- </button>
- }
- </mat-form-field>
+ <mat-form-field class="form-field-small asset-link-table-search">
+ <mat-icon matPrefix>search</mat-icon>
+ <input
+ #searchInput
+ matInput
+ [placeholder]="'Search' | translate"
+ [value]="searchTerm"
+ (input)="updateSearch($any($event.target).value)"
+ />
+ @if (searchTerm) {
+ <button
+ mat-icon-button
+ matSuffix
+ type="button"
+ [attr.aria-label]="'Clear search' | translate"
+ (click)="clearSearch()"
+ >
+ <mat-icon>close</mat-icon>
+ </button>
+ }
+ </mat-form-field>
- <mat-button-toggle-group
- [value]="viewMode"
- (change)="updateViewMode($event.value)"
- >
- <mat-button-toggle value="grouped">
- {{ 'Grouped' | translate }}
- </mat-button-toggle>
- <mat-button-toggle value="list">
- {{ 'List' | translate }}
- </mat-button-toggle>
- </mat-button-toggle-group>
- </div>
+ <mat-button-toggle-group
+ [value]="viewMode"
+ (change)="updateViewMode($event.value)"
+ >
+ <mat-button-toggle value="grouped">
+ {{ 'Grouped' | translate }}
+ </mat-button-toggle>
+ <mat-button-toggle value="list">
+ {{ 'List' | translate }}
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>
- <table
- mat-table
- matSort
- [matSortActive]="sort.active"
- [matSortDirection]="sort.direction"
- class="sp-table"
- [dataSource]="renderedRows"
- [multiTemplateDataRows]="viewMode === 'grouped'"
- (matSortChange)="updateSort($event)"
- >
- <ng-container matColumnDef="selected">
- <th mat-header-cell *matHeaderCellDef></th>
- <td mat-cell *matCellDef="let resource">
- <mat-checkbox
- color="accent"
- [checked]="isResourceSelected(resource.resourceId)"
- [attr.data-cy]="
- 'select-' +
- resource.resourceType
- .toLowerCase()
- .replace(/\s+/g, '-') +
- '-checkbox-' +
- resource.resourceName
- "
- (change)="updateSelection($event.checked, resource)"
- (click)="$event.stopPropagation()"
- >
- </mat-checkbox>
- </td>
- </ng-container>
+ <table
+ mat-table
+ matSort
+ [matSortActive]="sort.active"
+ [matSortDirection]="sort.direction"
+ class="sp-table"
+ [dataSource]="renderedRows"
+ [multiTemplateDataRows]="viewMode === 'grouped'"
+ (matSortChange)="updateSort($event)"
+ >
+ <ng-container matColumnDef="selected">
+ <th mat-header-cell *matHeaderCellDef></th>
+ <td mat-cell *matCellDef="let resource">
+ <mat-checkbox
+ color="accent"
+ [checked]="isResourceSelected(resource.resourceId)"
+ [attr.data-cy]="
+ 'select-' +
+ resource.resourceType
+ .toLowerCase()
+ .replace(/\s+/g, '-') +
+ '-checkbox-' +
+ resource.resourceName
+ "
+ (change)="updateSelection($event.checked, resource)"
+ (click)="$event.stopPropagation()"
+ >
+ </mat-checkbox>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="type">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>
- {{ 'Type' | translate }}
- </th>
- <td mat-cell *matCellDef="let resource">
- <div
- fxLayout="column"
- fxLayoutAlign="start start"
- class="truncate"
- >
+ <ng-container matColumnDef="type">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Type' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let resource">
<div
- class="chip mt-sm mb-sm"
- [ngStyle]="{ color: getLinkTypeColor(resource) }"
+ fxLayout="column"
+ fxLayoutAlign="start start"
+ class="truncate"
>
- <mat-icon class="link-type-icon">
- {{ getLinkType(resource)?.linkIcon || 'link' }}
- </mat-icon>
- <span class="text-sm">
- {{
- getLinkType(resource)?.linkLabel ||
- resource.resourceType
- }}
- </span>
+ <div
+ class="chip mt-sm mb-sm"
+ [ngStyle]="{ color: getLinkTypeColor(resource) }"
+ >
+ <mat-icon class="link-type-icon">
+ {{ getLinkType(resource)?.linkIcon || 'link' }}
+ </mat-icon>
+ <span class="text-sm">
+ {{
+ getLinkType(resource)?.linkLabel ||
+ resource.resourceType
+ }}
+ </span>
+ </div>
</div>
- </div>
- </td>
- </ng-container>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="linkLabel">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>
- {{ 'Name' | translate }}
- </th>
- <td mat-cell *matCellDef="let resource">
- <div
- fxLayout="column"
- fxLayoutAlign="start start"
- class="truncate"
- >
- <span>{{ resource.resourceName }}</span>
- </div>
- </td>
- </ng-container>
+ <ng-container matColumnDef="linkLabel">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Name' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let resource">
+ <div
+ fxLayout="column"
+ fxLayoutAlign="start start"
+ class="truncate"
+ >
+ <span>{{ resource.resourceName }}</span>
+ </div>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="groupHeader">
- <td
- mat-cell
- *matCellDef="let group"
- class="asset-link-table-group-header-cell"
- [attr.colspan]="displayedColumns.length"
- >
- <div
- fxLayout="row"
- fxLayoutAlign="start center"
- fxLayoutGap="8px"
- class="asset-link-table-group-header"
+ <ng-container matColumnDef="groupHeader">
+ <td
+ mat-cell
+ *matCellDef="let group"
+ class="asset-link-table-group-header-cell"
+ [attr.colspan]="displayedColumns.length"
>
- <button
- mat-icon-button
- type="button"
- class="asset-link-table-group-toggle"
- (click)="toggleGroup(group.id)"
- >
- <mat-icon>
- {{
- group.collapsed
- ? 'chevron_right'
- : 'expand_more'
- }}
- </mat-icon>
- </button>
<div
- class="chip asset-link-table-group-chip"
- [ngStyle]="{ color: group.color }"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ fxLayoutGap="8px"
+ class="asset-link-table-group-header"
>
- <mat-icon class="link-type-icon">
- {{ group.icon }}
- </mat-icon>
- <span class="text-sm">
- {{ group.title | translate }}
+ <button
+ mat-icon-button
+ type="button"
+ class="asset-link-table-group-toggle"
+ (click)="toggleGroup(group.id)"
+ >
+ <mat-icon>
+ {{
+ group.collapsed
+ ? 'chevron_right'
+ : 'expand_more'
+ }}
+ </mat-icon>
+ </button>
+ <div
+ class="chip asset-link-table-group-chip"
+ [ngStyle]="{ color: group.color }"
+ >
+ <mat-icon class="link-type-icon">
+ {{ group.icon }}
+ </mat-icon>
+ <span class="text-sm">
+ {{ group.title | translate }}
+ </span>
+ </div>
+ <span class="asset-link-table-group-count text-sm">
+ {{ group.count }}
</span>
</div>
- <span class="asset-link-table-group-count text-sm">
- {{ group.count }}
- </span>
- </div>
- </td>
- </ng-container>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr
- mat-row
- *matRowDef="
- let row;
- columns: groupHeaderColumns;
- when: isGroupHeaderRow
- "
- class="asset-link-table-group-row"
- ></tr>
- <tr
- mat-row
- *matRowDef="let row; columns: displayedColumns; when: isDataRow"
- ></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr
+ mat-row
+ *matRowDef="
+ let row;
+ columns: groupHeaderColumns;
+ when: isGroupHeaderRow
+ "
+ class="asset-link-table-group-row"
+ ></tr>
+ <tr
+ mat-row
+ *matRowDef="let row; columns: displayedColumns; when:
isDataRow"
+ ></tr>
- <tr class="mat-row" *matNoDataRow>
- <td
- class="mat-cell"
- data-cy="no-table-entries"
- [colSpan]="displayedColumns.length"
- >
- {{ 'No entries available.' | translate }}
- </td>
- </tr>
- </table>
+ <tr class="mat-row" *matNoDataRow>
+ <td
+ class="mat-cell"
+ data-cy="no-table-entries"
+ [colSpan]="displayedColumns.length"
+ >
+ {{ 'No entries available.' | translate }}
+ </td>
+ </tr>
+ </table>
+ }
</div>
diff --git
a/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.ts
b/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.ts
index 16a15e71f0..6f28abd3a9 100644
---
a/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.ts
+++
b/ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.ts
@@ -65,6 +65,7 @@ import {
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { LayoutGapDirective } from '@ngbracket/ngx-layout';
+import { SpAlertBannerComponent } from '@streampipes/shared-ui';
interface AssetLinkGroupHeaderRow {
groupHeader: true;
@@ -112,6 +113,7 @@ type AssetLinkViewMode = 'grouped' | 'list';
MatSuffix,
MatTable,
NgStyle,
+ SpAlertBannerComponent,
TranslatePipe,
],
})
@@ -128,6 +130,9 @@ export class AssetLinkTableComponent {
@Input()
assetLinkTypes: AssetLinkType[] = [];
+ @Input()
+ resourcesLoading = false;
+
@Output()
selectionChange = new EventEmitter<AssetLinkSelectionChange>();
diff --git
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
index 7bcd39cc0c..56fcb013cf 100644
---
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
+++
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
@@ -24,6 +24,7 @@
[resources]="resourceRows"
[selectedResourceIds]="selectedResourceIds"
[assetLinkTypes]="assetLinkTypes"
+ [resourcesLoading]="resourcesLoading"
(selectionChange)="selectLink($event)"
data-cy="manage-asset-links-table"
>
diff --git
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
index ddf8d37c14..b4d3d26d52 100644
---
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
+++
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
@@ -63,6 +63,7 @@ export class SpManageAssetLinksDialogComponent
clonedAssetLinks: AssetLink[] = [];
resourceRows: AssetLinkResourceRow[] = [];
+ resourcesLoading = true;
ngOnInit(): void {
super.onInit();
@@ -161,6 +162,7 @@ export class SpManageAssetLinksDialogComponent
),
),
];
+ this.resourcesLoading = false;
}
linkSelected(resourceId: string): boolean {
