This is an automated email from the ASF dual-hosted git repository.
tenthe pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new acf6da1356 Alert Banner for asset links (#4717)
acf6da1356 is described below
commit acf6da13568cc59f329d023a8cbb207881550dfb
Author: Jacqueline Höllig <[email protected]>
AuthorDate: Thu Jul 23 23:03:39 2026 +0200
Alert Banner for asset links (#4717)
Co-authored-by: Philipp Zehnder <[email protected]>
---
ui/STYLEGUIDE.md | 14 +
.../sp-spinner/sp-spinner.component.html} | 17 +-
.../sp-spinner/sp-spinner.component.scss} | 11 +-
.../components/sp-spinner/sp-spinner.component.ts} | 23 +-
.../streampipes/shared-ui/src/public-api.ts | 1 +
.../asset-details-links.component.html | 21 +-
.../asset-link-table.component.html | 201 ++++++-----
.../asset-link-table/asset-link-table.component.ts | 5 +
.../view-asset-links.component.html | 6 +-
.../view-asset-links/view-asset-links.component.ts | 2 +
.../asset-link-table.component.html | 387 +++++++++++----------
.../asset-link-table/asset-link-table.component.ts | 5 +
.../manage-asset-links-dialog.component.html | 1 +
.../manage-asset-links-dialog.component.ts | 2 +
.../chart-container/chart-container.component.html | 8 +-
.../chart-container/chart-container.component.ts | 4 +-
.../chart-overview-table.component.html | 35 +-
.../chart-overview-table.component.ts | 4 +-
.../chart-overview/chart-overview.component.scss | 5 -
...service-running-instances-dialog.component.html | 2 +-
...s-service-running-instances-dialog.component.ts | 4 +-
.../email-configuration.component.html | 4 +-
.../email-configuration.component.ts | 4 +-
.../data-export-dialog.component.html | 8 +-
.../export-dialog/data-export-dialog.component.ts | 4 +-
.../data-import-dialog.component.html | 8 +-
.../import-dialog/data-import-dialog.component.ts | 4 +-
.../extensions-installation.component.html | 16 +-
.../extensions-installation.component.ts | 4 +-
.../adapter-catalog/adapter-catalog.component.html | 14 +-
.../adapter-catalog/adapter-catalog.component.ts | 4 +-
...configure-fields-loading-message.component.html | 2 +-
.../configure-fields-loading-message.component.ts | 4 +-
.../adapter-result-preview.component.html | 2 +-
.../adapter-result-preview.component.ts | 4 +-
.../adapter-sample-preview.component.html | 2 +-
.../adapter-sample-preview.component.ts | 4 +-
.../existing-adapters.component.html | 5 +-
.../existing-adapters.component.ts | 4 +-
.../adapter-started-loading.component.html | 8 +-
.../adapter-started-loading.component.ts | 4 +-
.../delete-adapter-dialog.component.html | 6 +-
.../delete-adapter-dialog.component.ts | 5 +-
.../loading-indicator.component.html | 3 +-
.../loading-indicator.component.scss | 5 -
.../loading-indicator.component.ts | 4 +-
.../multi-step-status-indicator.component.html | 5 +-
.../multi-step-status-indicator.component.ts | 4 +-
...tic-runtime-resolvable-any-input.component.html | 6 +-
...tatic-runtime-resolvable-any-input.component.ts | 4 +-
...c-runtime-resolvable-oneof-input.component.html | 6 +-
...tic-runtime-resolvable-oneof-input.component.ts | 8 +-
.../static-tree-input-button-menu.component.html | 6 +-
.../static-tree-input-button-menu.component.ts | 4 +-
.../chart-selection/chart-selection.component.html | 10 +-
.../chart-selection/chart-selection.component.scss | 5 -
.../chart-selection/chart-selection.component.ts | 4 +-
.../clone-dashboard-dialog.component.html | 2 +-
.../clone-dashboard-dialog.component.ts | 9 +-
.../dataset-details-events.component.html | 7 +-
.../dataset-details-events.component.ts | 4 +-
.../dataset-details-metrics.component.html | 7 +-
.../dataset-details-metrics.component.ts | 8 +-
.../dataset-overview.component.html | 8 +-
.../dataset-overview/dataset-overview.component.ts | 4 +-
.../csv-import-dialog.component.html | 2 +-
.../csv-import-dialog.component.ts | 4 +-
.../data-retention-now-dialog.component.html | 6 +-
.../data-retention-now-dialog.component.ts | 9 +-
.../delete-dataset-dialog.component.html | 5 +-
.../delete-dataset-dialog.component.ts | 5 +-
.../delete-export-provider-dialog.component.html | 5 +-
.../delete-export-provider-dialog.component.ts | 5 +-
.../export-provider-connection-test.component.html | 6 +-
.../export-provider-connection-test.component.ts | 9 +-
...-assembly-options-pipeline-cache.component.html | 6 +-
...ne-assembly-options-pipeline-cache.component.ts | 4 +-
.../pipeline-element-preview.component.html | 8 +-
.../pipeline-element-preview.component.ts | 4 +-
.../dropped-pipeline-element.component.html | 6 +-
.../dropped-pipeline-element.component.ts | 8 +-
ui/src/app/editor/editor.component.html | 8 +-
ui/src/app/editor/editor.component.ts | 4 +-
.../welcome-tour/welcome-tour.component.html | 8 +-
.../dialog/welcome-tour/welcome-tour.component.ts | 4 +-
.../login/components/login/login.component.html | 5 +-
.../app/login/components/login/login.component.ts | 4 +-
.../components/register/register.component.html | 6 +-
.../components/register/register.component.ts | 4 +-
.../set-new-password.component.html | 6 +-
.../set-new-password/set-new-password.component.ts | 4 +-
.../login/components/setup/setup.component.html | 5 +-
.../app/login/components/setup/setup.component.ts | 4 +-
.../delete-pipeline-dialog.component.html | 6 +-
.../delete-pipeline-dialog.component.ts | 5 +-
.../pipeline-notifications.component.html | 2 +-
.../pipeline-notifications.component.ts | 5 +-
.../pipeline-status-dialog.component.html | 17 +-
.../pipeline-status-dialog.component.ts | 5 +-
99 files changed, 586 insertions(+), 609 deletions(-)
diff --git a/ui/STYLEGUIDE.md b/ui/STYLEGUIDE.md
index 2560fccaf0..3d34ea559d 100644
--- a/ui/STYLEGUIDE.md
+++ b/ui/STYLEGUIDE.md
@@ -202,6 +202,20 @@ Use `sp-progress-bar` when real progress is available.
Provide the current `valu
></sp-progress-bar>
```
+#### Spinner
+
+Use `sp-spinner` for indeterminate loading states where no real progress value
is available. Prefer it over direct `mat-spinner` usage to keep loading
indicators consistent.
+
+```html
+<sp-spinner [text]="'Loading assets' | translate" [diameter]="30"></sp-spinner>
+```
+
+For compact inline loading states, use a smaller diameter and row layout:
+
+```html
+<sp-spinner [diameter]="20" layout="row"></sp-spinner>
+```
+
#### Tables
For rendering tables, always use the `sp-table` component which comes with
pre-defined features for paging, sorting and layout.
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.html
similarity index 72%
copy from
ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
copy to
ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.html
index 260248b4e3..86159f31f2 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.html
@@ -16,7 +16,18 @@
~
-->
-<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <mat-spinner [diameter]="25"></mat-spinner>
- <h5>{{ 'Loading' | translate }}</h5>
+<div
+ [fxLayout]="layout"
+ [fxLayoutAlign]="align"
+ [fxLayoutGap]="text ? gap : '0px'"
+ class="sp-spinner"
+>
+ <mat-spinner
+ color="accent"
+ [diameter]="diameter"
+ mode="indeterminate"
+ ></mat-spinner>
+ @if (text) {
+ <div class="sp-spinner__text">{{ text }}</div>
+ }
</div>
diff --git
a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.scss
similarity index 83%
copy from ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
copy to
ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.scss
index 59443f668b..38c5dc7f5c 100644
--- a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.scss
@@ -16,7 +16,12 @@
*
*/
-.message-text {
- font-size: var(--font-size-md);
- margin-top: 10px;
+.sp-spinner {
+ width: fit-content;
+}
+
+.sp-spinner__text {
+ color: var(--color-paragraph);
+ font-size: var(--font-size-sm);
+ text-align: center;
}
diff --git
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.ts
similarity index 72%
copy from
ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
copy to
ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.ts
index 666f2b7fdc..904fad5d26 100644
---
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-spinner/sp-spinner.component.ts
@@ -17,29 +17,28 @@
*/
import { Component, Input } from '@angular/core';
-import { Status, StatusIndicator } from './multi-step-status-indicator.model';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
import {
- FlexDirective,
LayoutAlignDirective,
LayoutDirective,
LayoutGapDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
@Component({
- selector: 'sp-multi-step-status-indicator',
- templateUrl: './multi-step-status-indicator.component.html',
- styleUrls: ['./multi-step-status-indicator.component.scss'],
+ selector: 'sp-spinner',
+ templateUrl: './sp-spinner.component.html',
+ styleUrls: ['./sp-spinner.component.scss'],
imports: [
LayoutDirective,
- LayoutGapDirective,
- FlexDirective,
LayoutAlignDirective,
+ LayoutGapDirective,
MatProgressSpinner,
],
})
-export class MultiStepStatusIndicatorComponent {
- @Input()
- statusIndicators: StatusIndicator[] = [];
- protected readonly Status = Status;
+export class SpSpinnerComponent {
+ @Input() text = '';
+ @Input() layout: 'column' | 'row' = 'column';
+ @Input() align = 'center center';
+ @Input() gap = '8px';
+ @Input() diameter = 30;
}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts
b/ui/projects/streampipes/shared-ui/src/public-api.ts
index dfa1358113..7cf7d799ff 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -51,6 +51,7 @@ export * from
'./lib/components/search-select/search-select-template.directive';
export * from './lib/components/progress-bar/progress-bar.component';
export * from './lib/components/split-section/split-section.component';
export * from './lib/components/split-button/split-button.component';
+export * from './lib/components/sp-spinner/sp-spinner.component';
export * from
'./lib/components/sp-exception-message/sp-exception-message.component';
export * from
'./lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component';
export * from
'./lib/components/sp-exception-message/exception-details/exception-details.component';
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
index 608ce0aaaa..66493e6ba2 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
@@ -42,15 +42,14 @@
</button>
}
</div>
- @if (assetLinkTypes) {
- <div fxLayout="column" fxFlex="100" class="mt-10">
- <sp-asset-link-table
- #assetLinkTable
- [assetLinkTypes]="assetLinkTypes"
- [asset]="asset"
- [assetModel]="assetModel"
- [editMode]="true"
- ></sp-asset-link-table>
- </div>
- }
+ <div fxLayout="column" fxFlex="100" class="mt-10">
+ <sp-asset-link-table
+ #assetLinkTable
+ [assetLinkTypes]="assetLinkTypes"
+ [asset]="asset"
+ [assetModel]="assetModel"
+ [editMode]="true"
+ [loading]="!assetLinksLoaded"
+ ></sp-asset-link-table>
+ </div>
</sp-split-section>
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..08e1cd1908 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,112 @@
-->
<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) {
+ <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
+ <sp-spinner
+ [diameter]="25"
+ [text]="'Loading' | translate"
+ ></sp-spinner>
+ </div>
+ } @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..cce831064c 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,
+ SpSpinnerComponent,
} 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,
+ SpSpinnerComponent,
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..e3b97bf4ec 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,12 +34,14 @@
}
</div>
@if (
- assetLinkTypes.length > 0 &&
- selectedAsset.assetLinks?.length > 0
+ assetLinkTypesLoading ||
+ (assetLinkTypes.length > 0 &&
+ selectedAsset.assetLinks?.length > 0)
) {
<sp-asset-link-table
[asset]="selectedAsset"
[assetLinkTypes]="assetLinkTypes"
+ [loading]="assetLinkTypesLoading"
>
</sp-asset-link-table>
} @else {
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..724e967ce8 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,219 @@
-->
<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()"
+ @if (resourcesLoading) {
+ <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
+ <sp-spinner
+ [diameter]="25"
+ [text]="'Loading' | translate"
+ ></sp-spinner>
+ </div>
+ } @else {
+ <div
+ fxLayout="row wrap"
+ fxLayoutAlign="end center"
+ fxLayoutGap="8px"
+ class="asset-link-table-toolbar"
>
- <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>
+ <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..a905d58b93 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 { SpSpinnerComponent } from '@streampipes/shared-ui';
interface AssetLinkGroupHeaderRow {
groupHeader: true;
@@ -101,6 +102,7 @@ type AssetLinkViewMode = 'grouped' | 'list';
MatHeaderRow,
MatHeaderRowDef,
MatIcon,
+ SpSpinnerComponent,
MatIconButton,
MatInput,
MatNoDataRow,
@@ -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 {
diff --git
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
index 7f1ca237ef..c6157b7eba 100644
---
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
+++
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
@@ -85,12 +85,8 @@
<div fxLayout="row" fxLayoutAlign="end center">
@if (editMode) {
@if (timerActive) {
- <mat-spinner
- [diameter]="20"
- color="primary"
- class="mr-10"
- >
- </mat-spinner>
+ <sp-spinner [diameter]="20" class="mr-10">
+ </sp-spinner>
}
<sp-label
shape="badge"
diff --git
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
index f0c5677634..6772343bb1 100644
---
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
+++
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
@@ -59,6 +59,7 @@ import {
TimeRangeSelectorMenuComponent,
TimeSelectionService,
TimeSelectorLabel,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { ChartSharedService } from '../../services/chart-shared.service';
import {
@@ -79,7 +80,6 @@ import {
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { FormsModule } from '@angular/forms';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslatePipe } from '@ngx-translate/core';
@@ -97,7 +97,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatIconButton,
MatIcon,
FormsModule,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpLabelComponent,
MatMenuTrigger,
MatTooltip,
diff --git
a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html
b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html
index 0df252e181..48d96ef2ce 100644
---
a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html
+++
b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html
@@ -21,35 +21,22 @@
[title]="'Charts' | translate"
></sp-basic-header-title-component>
@if (isLoading && !hasLoadedCharts) {
- <div
- fxLayout="column"
- fxFlex="100"
- fxLayoutAlign="center center"
- fxLayoutGap="12px"
- >
- <mat-progress-spinner
- mode="indeterminate"
+ <div fxLayout="column" fxFlex="100" fxLayoutAlign="center center">
+ <sp-spinner
diameter="40"
- ></mat-progress-spinner>
- <span class="chart-overview-loading-text">{{
- 'Loading' | translate
- }}</span>
+ [text]="'Loading' | translate"
+ ></sp-spinner>
</div>
} @else {
@if (isLoading) {
- <div
- fxLayout="row"
- fxLayoutAlign="end center"
- fxLayoutGap="8px"
- class="p-2"
- >
- <mat-progress-spinner
- mode="indeterminate"
+ <div class="p-2">
+ <sp-spinner
diameter="18"
- ></mat-progress-spinner>
- <span class="chart-overview-loading-text">{{
- 'Loading' | translate
- }}</span>
+ layout="row"
+ align="end center"
+ gap="8px"
+ [text]="'Loading' | translate"
+ ></sp-spinner>
</div>
}
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
diff --git
a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts
b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts
index 3fcc7a1a78..9efb008a52 100644
---
a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts
+++
b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts
@@ -51,6 +51,7 @@ import {
SpBasicHeaderTitleComponent,
SpTableActionsDirective,
SpTableComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { MatDialog } from '@angular/material/dialog';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
@@ -67,7 +68,6 @@ import { MatMenuItem } from '@angular/material/menu';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';
import { ChartRegistry } from
'../../../../chart-shared/registry/chart-registry.service';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
type ManageableChart = DataExplorerWidgetModel & {
name: string;
@@ -109,7 +109,7 @@ type ChartOverviewRow = ChartSummaryDto & {
MatMenuItem,
MatIcon,
MatTooltip,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
],
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git
a/ui/src/app/chart/components/chart-overview/chart-overview.component.scss
b/ui/src/app/chart/components/chart-overview/chart-overview.component.scss
index c10f9025ea..9103beb12d 100644
--- a/ui/src/app/chart/components/chart-overview/chart-overview.component.scss
+++ b/ui/src/app/chart/components/chart-overview/chart-overview.component.scss
@@ -35,8 +35,3 @@
.mr-10 {
margin-right: 10px;
}
-
-.chart-overview-loading-text {
- font-size: var(--font-size-sm);
- color: var(--color-paragraph);
-}
diff --git
a/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.html
b/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.html
index 3253a9b4e9..2fcb0df546 100644
---
a/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.html
+++
b/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.html
@@ -47,7 +47,7 @@
fxLayoutAlign="center center"
class="loading-container"
>
- <mat-spinner diameter="32"></mat-spinner>
+ <sp-spinner diameter="32"></sp-spinner>
</div>
}
diff --git
a/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.ts
b/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.ts
index 02dcb597ae..fd0d313d21 100644
---
a/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.ts
+++
b/ui/src/app/configuration/dialog/extensions-service-running-instances/extensions-service-running-instances-dialog.component.ts
@@ -20,7 +20,6 @@ import { Component, Input, OnInit, inject } from
'@angular/core';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import {
MatCell,
MatCellDef,
@@ -45,6 +44,7 @@ import {
SpLabelComponent,
SpTableComponent,
SpTableNameSearchConfig,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import {
ConfigurationService,
@@ -95,7 +95,7 @@ type PendingRemoval =
MatHeaderCellDef,
MatIcon,
MatIconButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatTooltip,
SpAlertBannerComponent,
SpLabelComponent,
diff --git
a/ui/src/app/configuration/email-configuration/email-configuration.component.html
b/ui/src/app/configuration/email-configuration/email-configuration.component.html
index 60bdf5e4fd..44d2e98b6a 100644
---
a/ui/src/app/configuration/email-configuration/email-configuration.component.html
+++
b/ui/src/app/configuration/email-configuration/email-configuration.component.html
@@ -269,9 +269,7 @@
<div fxLayout="column">
@if (sendingTestMailInProgress) {
<div fxLayout="row">
- <mat-progress-spinner
- diameter="10"
- ></mat-progress-spinner>
+ <sp-spinner diameter="10"></sp-spinner>
<h5>
{{
'Trying to send test mail...'
diff --git
a/ui/src/app/configuration/email-configuration/email-configuration.component.ts
b/ui/src/app/configuration/email-configuration/email-configuration.component.ts
index d4d0a0efa4..ae753740d6 100644
---
a/ui/src/app/configuration/email-configuration/email-configuration.component.ts
+++
b/ui/src/app/configuration/email-configuration/email-configuration.component.ts
@@ -36,6 +36,7 @@ import {
SpBreadcrumbService,
SplitSectionComponent,
SpNavigationItem,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import {
@@ -48,7 +49,6 @@ import { MatInput } from '@angular/material/input';
import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { SpEmailTemplateConfigurationComponent } from
'./email-template-configuration/email-template-configuration.component';
import { MatDivider } from '@angular/material/divider';
@@ -71,7 +71,7 @@ import { MatDivider } from '@angular/material/divider';
MatCheckbox,
MatLabel,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpAlertBannerComponent,
SpEmailTemplateConfigurationComponent,
MatDivider,
diff --git
a/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.html
b/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.html
index 78ad88e566..7488e6257e 100644
---
a/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.html
+++
b/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.html
@@ -209,10 +209,10 @@
class="mt-10"
fxLayoutAlign="center center"
>
- <mat-spinner [diameter]="25" color="accent"></mat-spinner>
- <h4 class="mt-10">
- {{ 'Exporting resources...' | translate }}
- </h4>
+ <sp-spinner
+ [diameter]="25"
+ [text]="'Exporting resources...' | translate"
+ ></sp-spinner>
<span class="text-md mt-10">
{{
'Depending on number and size of exported files, this
might take a while...'
diff --git
a/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.ts
b/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.ts
index 0b64ce549b..1e129e2ec9 100644
---
a/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.ts
+++
b/ui/src/app/configuration/export/export-dialog/data-export-dialog.component.ts
@@ -21,6 +21,7 @@ import {
DialogRef,
SpAlertBannerComponent,
SplitSectionComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { DataExportService } from '../data-export.service';
import {
@@ -34,7 +35,6 @@ import {
LayoutDirective,
LayoutGapDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
@@ -72,7 +72,7 @@ type ExportSectionKey =
LayoutDirective,
LayoutAlignDirective,
LayoutGapDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
MatButton,
MatCheckbox,
diff --git
a/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.html
b/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.html
index aaef675895..ee2ae02af5 100644
---
a/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.html
+++
b/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.html
@@ -204,10 +204,10 @@
class="mt-10"
fxLayoutAlign="center center"
>
- <mat-spinner [diameter]="50" color="accent"></mat-spinner>
- <h4 class="mt-10">
- {{ 'Importing resources...' | translate }}
- </h4>
+ <sp-spinner
+ [diameter]="50"
+ [text]="'Importing resources...' | translate"
+ ></sp-spinner>
</div>
}
</div>
diff --git
a/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.ts
b/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.ts
index 4a15ae4e1a..5c3170a1a7 100644
---
a/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.ts
+++
b/ui/src/app/configuration/export/import-dialog/data-import-dialog.component.ts
@@ -22,6 +22,7 @@ import {
SpAlertBannerComponent,
SpAssetBrowserService,
SplitSectionComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { DataExportService } from '../data-export.service';
import { HttpEventType, HttpResponse } from '@angular/common/http';
@@ -49,7 +50,6 @@ import { SpDataExportItemComponent } from
'../export-dialog/data-export-item/dat
import { GenericStorageItemsComponent } from
'../export-dialog/generic-storage-items/generic-storage-items.component';
import { MatCheckbox } from '@angular/material/checkbox';
import { FormsModule } from '@angular/forms';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
@Component({
@@ -74,7 +74,7 @@ import { MatDivider } from '@angular/material/divider';
FormsModule,
FlexDirective,
LayoutAlignDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
TranslatePipe,
],
diff --git
a/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
index 65789caf64..3c107650fe 100644
---
a/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
+++
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
@@ -181,18 +181,16 @@
</div>
}
@if (!endpointItemsLoadingComplete) {
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="center center">
- <mat-spinner
- [mode]="'indeterminate'"
+ <div fxFlex="100" fxLayoutAlign="center center">
+ <sp-spinner
[diameter]="20"
- color="accent"
- ></mat-spinner>
- <h4>
- {{
+ layout="row"
+ gap="8px"
+ [text]="
'Searching for available extensions, please wait...'
| translate
- }}
- </h4>
+ "
+ ></sp-spinner>
</div>
}
</div>
diff --git
a/ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
index 1ec6d98159..c3e5cdf988 100644
---
a/ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
+++
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
@@ -25,6 +25,7 @@ import {
SpBasicNavTabsComponent,
SpBreadcrumbService,
SpNavigationItem,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { ExtensionItemDescription } from '@streampipes/platform-services';
import {
@@ -49,7 +50,6 @@ import { MatInput } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { EndpointItemComponent } from
'./endpoint-item/endpoint-item.component';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { OrderByPipe } from './filter/order-by.pipe';
import { PipelineElementNameFilter } from
'./filter/pipeline-element-name.pipe';
import { PipelineElementInstallationStatusFilter } from
'./filter/pipeline-element-installation-status.pipe';
@@ -76,7 +76,7 @@ import { PipelineElementTypeFilter } from
'./filter/pipeline-element-type.pipe';
MatPrefix,
SpBasicHeaderTitleComponent,
EndpointItemComponent,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
OrderByPipe,
PipelineElementNameFilter,
diff --git
a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html
b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html
index 3b0af4080c..f1bbdffef6 100644
---
a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html
+++
b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html
@@ -51,17 +51,13 @@
class="container-fluid marketplace-container"
fxFlex="100"
fxLayoutAlign="center center"
- fxLayout="row"
>
- <mat-spinner
- [mode]="'indeterminate'"
+ <sp-spinner
[diameter]="20"
- color="accent"
- ></mat-spinner>
- <h4>
- Searching for available adapters, please
- wait...
- </h4>
+ layout="row"
+ gap="8px"
+ text="Searching for available adapters, please wait..."
+ ></sp-spinner>
</div>
}
@if (!adaptersLoading && !adapterLoadingError) {
diff --git
a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts
b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts
index 31e5bf8c5e..7e792e55a4 100644
--- a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts
+++ b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts
@@ -25,6 +25,7 @@ import {
SpBasicHeaderTitleComponent,
SpBasicViewComponent,
SpBreadcrumbService,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { AdapterFilterSettingsModel } from
'../../model/adapter-filter-settings.model';
import { SpConnectRoutes } from '../../connect.breadcrumb';
@@ -34,7 +35,6 @@ import {
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { SpConnectFilterToolbarComponent } from
'../filter-toolbar/filter-toolbar.component';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { AdapterCatalogItemComponent } from
'./adapter-description/adapter-catalog-item.component';
import { TranslatePipe } from '@ngx-translate/core';
import { AdapterFilterPipe } from '../../filter/adapter-filter.pipe';
@@ -50,7 +50,7 @@ import { AdapterFilterPipe } from
'../../filter/adapter-filter.pipe';
LayoutDirective,
SpConnectFilterToolbarComponent,
SpBasicHeaderTitleComponent,
- MatProgressSpinner,
+ SpSpinnerComponent,
AdapterCatalogItemComponent,
TranslatePipe,
AdapterFilterPipe,
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
b/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
index 260248b4e3..ec8a019c58 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
+++
b/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.html
@@ -17,6 +17,6 @@
-->
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <mat-spinner [diameter]="25"></mat-spinner>
+ <sp-spinner [diameter]="25"></sp-spinner>
<h5>{{ 'Loading' | translate }}</h5>
</div>
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.ts
b/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.ts
index 80849a1208..de64d0aabc 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/configure-fields/configure-fields-loading-message/configure-fields-loading-message.component.ts
@@ -22,8 +22,8 @@ import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-configure-fields-loading-message',
@@ -32,7 +32,7 @@ import { TranslatePipe } from '@ngx-translate/core';
FlexDirective,
LayoutAlignDirective,
LayoutDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
],
})
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.html
b/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.html
index dc907b38a8..13dd55bd1b 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.html
+++
b/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.html
@@ -39,7 +39,7 @@
@if (isRunningScript()) {
<div class="m-lg">
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <mat-spinner [diameter]="25"></mat-spinner>
+ <sp-spinner [diameter]="25"></sp-spinner>
<h5>{{ 'Loading' | translate }}</h5>
</div>
</div>
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.ts
b/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.ts
index a99ab2bf91..a1bb36ebc8 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/configure-schema/result-preview/adapter-result-preview.component.ts
@@ -24,6 +24,7 @@ import {
import {
SpBasicInnerPanelComponent,
SpExceptionMessageComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import {
FlexDirective,
@@ -34,7 +35,6 @@ import {
MatButtonToggle,
MatButtonToggleGroup,
} from '@angular/material/button-toggle';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
@@ -47,7 +47,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatButtonToggleGroup,
MatButtonToggle,
LayoutDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpExceptionMessageComponent,
AdapterEventPreviewComponent,
TranslatePipe,
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.html
b/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.html
index e3945675cb..869b8cb669 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.html
+++
b/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.html
@@ -59,7 +59,7 @@
fxLayout="column"
class="m-lg"
>
- <mat-spinner [diameter]="25"></mat-spinner>
+ <sp-spinner [diameter]="25"></sp-spinner>
<h5>{{ 'Loading' | translate }}</h5>
</div>
} @else {
diff --git
a/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.ts
b/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.ts
index a82f12ad32..a4d4afa33d 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/configure-schema/sample-preview/adapter-sample-preview.component.ts
@@ -24,6 +24,7 @@ import {
import {
SpBasicInnerPanelComponent,
SpExceptionMessageComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import {
FlexDirective,
@@ -36,7 +37,6 @@ import {
MatButtonToggle,
MatButtonToggleGroup,
} from '@angular/material/button-toggle';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { ShowFieldStatusInfosComponent } from
'../show-field-status-infos/show-field-status-infos.component';
import { TranslatePipe } from '@ngx-translate/core';
@@ -52,7 +52,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatButtonToggleGroup,
MatButtonToggle,
LayoutDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpExceptionMessageComponent,
ShowFieldStatusInfosComponent,
AdapterEventPreviewComponent,
diff --git
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index 489ceb39ce..08f8938548 100644
---
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -115,10 +115,7 @@
data-cy="adapter-operation-in-progress-spinner"
fxLayoutAlign="center center"
>
- <mat-spinner
- color="accent"
- [diameter]="20"
- ></mat-spinner>
+ <sp-spinner [diameter]="20"></sp-spinner>
</div>
} @else if (!adapter.running) {
<button
diff --git
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
index 5808e77d53..003d6f7e52 100644
---
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
+++
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
@@ -52,6 +52,7 @@ import {
SpTableMultiActionOption,
SpTableActionsDirective,
SpTableComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { AdapterCodeDialogComponent } from
'../../dialog/adapter-code-dialog/adapter-code-dialog.component';
import { DeleteAdapterDialogComponent } from
'../../dialog/delete-adapter-dialog/delete-adapter-dialog.component';
@@ -73,7 +74,6 @@ import { MatButton, MatIconButton } from
'@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';
import { AdapterStatusLightComponent } from
'./adapter-status-light/adapter-status-light.component';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatMenuItem } from '@angular/material/menu';
import { DatePipe } from '@angular/common';
@@ -101,7 +101,7 @@ import { DatePipe } from '@angular/common';
MatCellDef,
MatCell,
AdapterStatusLightComponent,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpLabelComponent,
SpTableActionsDirective,
MatMenuItem,
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.html
b/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.html
index 34024865d4..2d49748fa2 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.html
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.html
@@ -18,13 +18,11 @@
<div fxLayout="column">
<div fxLayoutAlign="center">
- <mat-spinner
+ <sp-spinner
[diameter]="50"
- fxLayoutAlign="center"
style="margin: 10px 0 5px 0"
- color="accent"
- >Loading
- </mat-spinner>
+ text="Loading"
+ ></sp-spinner>
</div>
<div fxLayoutAlign="center">
<h4>
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.ts
b/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.ts
index 87d1172761..36b8d3d83c 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.ts
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-loading/adapter-started-loading.component.ts
@@ -17,16 +17,16 @@
*/
import { Component, Input } from '@angular/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
@Component({
selector: 'sp-adapter-started-loading',
templateUrl: './adapter-started-loading.component.html',
- imports: [LayoutDirective, LayoutAlignDirective, MatProgressSpinner],
+ imports: [LayoutDirective, LayoutAlignDirective, SpSpinnerComponent],
})
export class SpAdapterStartedLoadingComponent {
@Input()
diff --git
a/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.html
b/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.html
index fd9c175f88..8ea197cca1 100644
---
a/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.html
+++
b/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.html
@@ -145,11 +145,7 @@
data-cy="adapter-deletion-in-progress"
>
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner
- [diameter]="50"
- [mode]="'indeterminate'"
- color="accent"
- ></mat-spinner>
+ <sp-spinner [diameter]="50"></sp-spinner>
</div>
<b
><h4>{{ currentStatus }}</h4></b
diff --git
a/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
b/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
index 0bfce6884e..5159b08580 100644
---
a/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
+++
b/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
@@ -22,14 +22,13 @@ import {
AdapterSummaryDto,
AdapterService,
} from '@streampipes/platform-services';
-import { DialogRef } from '@streampipes/shared-ui';
+import { DialogRef, SpSpinnerComponent } from '@streampipes/shared-ui';
import {
FlexDirective,
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
import { TranslatePipe } from '@ngx-translate/core';
@@ -42,7 +41,7 @@ import { TranslatePipe } from '@ngx-translate/core';
FlexDirective,
LayoutAlignDirective,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
TranslatePipe,
],
diff --git
a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.html
b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.html
index 3be5c4666f..2f61c09c01 100644
--- a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.html
+++ b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.html
@@ -17,6 +17,5 @@
-->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="center center">
- <mat-spinner [diameter]="30" color="accent"></mat-spinner>
- <div class="message-text">{{ message() }}</div>
+ <sp-spinner [diameter]="30" [text]="message()"></sp-spinner>
</div>
diff --git
a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
index 59443f668b..13cbc4aacb 100644
--- a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
+++ b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
@@ -15,8 +15,3 @@
* limitations under the License.
*
*/
-
-.message-text {
- font-size: var(--font-size-md);
- margin-top: 10px;
-}
diff --git
a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts
b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts
index b96cf1100d..e2665f65c7 100644
--- a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts
+++ b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts
@@ -18,12 +18,12 @@
import { Component, inject, input } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
import {
FlexDirective,
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
@Component({
selector: 'sp-loading-indicator',
@@ -33,7 +33,7 @@ import { MatProgressSpinner } from
'@angular/material/progress-spinner';
LayoutDirective,
FlexDirective,
LayoutAlignDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
],
})
export class LoadingIndicatorComponent {
diff --git
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
index 40852f0157..e327d0b7a3 100644
---
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
+++
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
@@ -27,10 +27,7 @@
>
@if (step.status === Status.PROGRESS) {
<div>
- <mat-spinner
- [diameter]="25"
- color="accent"
- ></mat-spinner>
+ <sp-spinner [diameter]="25"></sp-spinner>
</div>
}
@if (step.status === Status.SUCCESS) {
diff --git
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
index 666f2b7fdc..0360b1ec75 100644
---
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
+++
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.ts
@@ -18,13 +18,13 @@
import { Component, Input } from '@angular/core';
import { Status, StatusIndicator } from './multi-step-status-indicator.model';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
import {
FlexDirective,
LayoutAlignDirective,
LayoutDirective,
LayoutGapDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
@Component({
selector: 'sp-multi-step-status-indicator',
@@ -35,7 +35,7 @@ import { MatProgressSpinner } from
'@angular/material/progress-spinner';
LayoutGapDirective,
FlexDirective,
LayoutAlignDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
],
})
export class MultiStepStatusIndicatorComponent {
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
index 1da759b0a6..a227a74559 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
@@ -48,11 +48,7 @@
<span>{{ 'Reload' | translate }}</span>
</button>
@if (loading) {
- <mat-spinner
- color="accent"
- [mode]="'indeterminate'"
- [diameter]="15"
- ></mat-spinner>
+ <sp-spinner [diameter]="15"></sp-spinner>
}
</div>
@if (!staticProperty.horizontalRendering) {
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
index 946a244f99..1905b1ebca 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
@@ -30,11 +30,11 @@ import {
LayoutGapDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatCheckbox } from '@angular/material/checkbox';
import { FormsModule } from '@angular/forms';
import { MatFormField } from '@angular/material/form-field';
import { TranslatePipe } from '@ngx-translate/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-app-static-runtime-resolvable-any-input',
@@ -44,7 +44,7 @@ import { TranslatePipe } from '@ngx-translate/core';
LayoutDirective,
LayoutGapDirective,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatCheckbox,
FormsModule,
MatFormField,
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
index 0cfcde78ec..e8d6021433 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
@@ -63,11 +63,7 @@
}
@if (loading) {
<div fxLayout="column">
- <mat-spinner
- color="accent"
- [mode]="'indeterminate'"
- [diameter]="20"
- ></mat-spinner>
+ <sp-spinner [diameter]="20"></sp-spinner>
</div>
}
</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
index 203439b179..8f64958019 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
@@ -30,9 +30,11 @@ import {
} from '@angular/forms';
import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { SpExceptionMessageComponent } from '@streampipes/shared-ui';
+import {
+ SpExceptionMessageComponent,
+ SpSpinnerComponent,
+} from '@streampipes/shared-ui';
import { MatRadioButton } from '@angular/material/radio';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
@@ -47,7 +49,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatButton,
SpExceptionMessageComponent,
MatRadioButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
],
})
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
index 9da8b1c965..32e3442218 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
@@ -50,11 +50,7 @@
fxLayoutAlign="start center"
data-cy="reloading-nodes"
>
- <mat-spinner
- color="accent"
- [mode]="'indeterminate'"
- [diameter]="15"
- ></mat-spinner>
+ <sp-spinner [diameter]="15"></sp-spinner>
<span class="reloading-nodes-label">{{
'Reloading nodes' | translate
}}</span>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
index 365889ea5d..f1e03402ee 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
@@ -24,13 +24,13 @@ import {
} from '@ngbracket/ngx-layout/flex';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import {
MatButtonToggle,
MatButtonToggleGroup,
} from '@angular/material/button-toggle';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslatePipe } from '@ngx-translate/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-static-tree-input-button-menu',
@@ -43,7 +43,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatButton,
MatIconButton,
MatIcon,
- MatProgressSpinner,
+ SpSpinnerComponent,
FlexDirective,
MatButtonToggleGroup,
MatButtonToggle,
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
index 0554e8ffdd..56fdceed77 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
@@ -103,16 +103,12 @@
fxFlex="100"
fxLayout="column"
fxLayoutAlign="center center"
- fxLayoutGap="12px"
class="chart-selection-loading"
>
- <mat-progress-spinner
- mode="indeterminate"
+ <sp-spinner
diameter="36"
- ></mat-progress-spinner>
- <span class="chart-selection-loading-text">{{
- 'Loading charts...' | translate
- }}</span>
+ [text]="'Loading charts...' | translate"
+ ></sp-spinner>
</div>
} @else if (charts.length > 0 && filteredChartItems.length > 0) {
<cdk-virtual-scroll-viewport
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
index 6af04c100e..2cc990e29c 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
@@ -98,11 +98,6 @@
text-align: center;
}
-.chart-selection-loading-text {
- font-size: var(--font-size-sm);
- color: var(--color-paragraph);
-}
-
.chart-selection-empty {
min-height: 220px;
text-align: center;
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts
index e191fb94dc..0b5ccf7f3c 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts
@@ -50,7 +50,6 @@ import {
MatSuffix,
} from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatTooltip } from '@angular/material/tooltip';
import {
CdkFixedSizeVirtualScroll,
@@ -59,6 +58,7 @@ import {
} from '@angular/cdk/scrolling';
import { debounceTime, distinctUntilChanged, finalize } from 'rxjs';
import { ChartSelectionItem } from './chart-selection.model';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-chart-selection',
@@ -79,7 +79,7 @@ import { ChartSelectionItem } from './chart-selection.model';
MatPrefix,
MatSuffix,
MatInput,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
MatTooltip,
CdkVirtualScrollViewport,
diff --git
a/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.html
b/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.html
index a752aba63c..ce0e29dac3 100644
---
a/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.html
+++
b/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.html
@@ -150,7 +150,7 @@
</div>
} @else {
<div fxFlex="100" fxLayoutAlign="center center">
- <mat-spinner [diameter]="20"></mat-spinner>
+ <sp-spinner [diameter]="20"></sp-spinner>
<h5 class="mt-10">Loading</h5>
</div>
}
diff --git
a/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.ts
b/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.ts
index 29ab64dc2b..3d4f63f278 100644
---
a/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.ts
+++
b/ui/src/app/dashboard/dialogs/clone-dashboard/clone-dashboard-dialog.component.ts
@@ -25,7 +25,11 @@ import {
DashboardService,
DataExplorerWidgetModel,
} from '@streampipes/platform-services';
-import { DialogRef, FormFieldComponent } from '@streampipes/shared-ui';
+import {
+ DialogRef,
+ FormFieldComponent,
+ SpSpinnerComponent,
+} from '@streampipes/shared-ui';
import { IdGeneratorService } from
'../../../core-services/id-generator/id-generator.service';
import { Observable, zip } from 'rxjs';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
@@ -47,7 +51,6 @@ import {
LayoutGapDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
export interface WidgetClone {
current: DataExplorerWidgetModel;
@@ -74,7 +77,7 @@ export interface WidgetClone {
LayoutGapDirective,
MatButton,
LayoutAlignDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
FormFieldComponent,
],
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
index 83102bde15..482e9bf6ea 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
@@ -81,9 +81,10 @@
fxLayoutAlign="center center"
class="loading-state"
>
- <mat-spinner [diameter]="32" color="accent">
- {{ 'Loading' | translate }}
- </mat-spinner>
+ <sp-spinner
+ [diameter]="32"
+ [text]="'Loading' | translate"
+ ></sp-spinner>
</div>
} @else {
<div
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
index 561adef0f1..62c0ba7212 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
@@ -23,6 +23,7 @@ import {
SpBasicHeaderTitleComponent,
SpBasicNavTabsComponent,
SpElementIdComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { SpAbstractDatasetDetailsDirective } from
'../abstract-dataset-details.directive';
import {
@@ -33,7 +34,6 @@ import {
} from '@ngbracket/ngx-layout/flex';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatTooltip } from '@angular/material/tooltip';
@@ -59,7 +59,7 @@ type PreviewRow = Record<string, unknown>;
FlexDirective,
MatButton,
MatIcon,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatFormField,
MatLabel,
MatInput,
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.html
b/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.html
index d86080fef6..c153eafe57 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.html
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.html
@@ -51,9 +51,10 @@
fxLayout="row"
fxLayoutAlign="center center"
>
- <mat-spinner [diameter]="32" color="accent">
- {{ 'Loading' | translate }}
- </mat-spinner>
+ <sp-spinner
+ [diameter]="32"
+ [text]="'Loading' | translate"
+ ></sp-spinner>
</div>
}
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.ts
b/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.ts
index bac1c7dc2d..d5a9e7fc9c 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.ts
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-metrics/dataset-details-metrics.component.ts
@@ -19,7 +19,10 @@
import { Component, OnInit } from '@angular/core';
import { SpAbstractDatasetDetailsDirective } from
'../abstract-dataset-details.directive';
import { SpQueryResult } from '@streampipes/platform-services';
-import { SpBasicNavTabsComponent } from '@streampipes/shared-ui';
+import {
+ SpBasicNavTabsComponent,
+ SpSpinnerComponent,
+} from '@streampipes/shared-ui';
import {
FlexDirective,
LayoutAlignDirective,
@@ -28,7 +31,6 @@ import {
} from '@ngbracket/ngx-layout/flex';
import { MatIconButton } from '@angular/material/button';
import { MatTooltip } from '@angular/material/tooltip';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
import { SpSimpleMetricsComponent } from
'../../../../core-ui/monitoring/simple-metrics/simple-metrics.component';
import { SpConfigurationRoutes } from
'../../../../configuration/configuration.breadcrumb';
@@ -55,7 +57,7 @@ interface DayBucket extends DailyEventCount {
FlexDirective,
MatIconButton,
MatTooltip,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
SpSimpleMetricsComponent,
DailyEventCountsChartComponent,
diff --git
a/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.html
b/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.html
index 90015afce3..c4d9f46038 100644
---
a/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.html
+++
b/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.html
@@ -92,12 +92,10 @@
*matCellDef="let configurationEntry"
>
@if (configurationEntry.lastEventLoading) {
- <mat-spinner
+ <sp-spinner
[diameter]="20"
- fxLayoutAlign="center"
- color="accent"
- >{{ 'Loading' | translate }}
- </mat-spinner>
+ [text]="'Loading' | translate"
+ ></sp-spinner>
} @else {
<sp-dataset-last-event-label
[lastEvent]="configurationEntry.lastEvent"
diff --git
a/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.ts
b/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.ts
index ede12bdada..5bcd213e70 100644
---
a/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.ts
+++
b/ui/src/app/dataset/components/dataset-overview/dataset-overview.component.ts
@@ -63,6 +63,7 @@ import {
SpTableAssetContextConfig,
SpTableActionsDirective,
SpTableComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { DeleteDatasetDialogComponent } from
'../../dialog/delete-dataset/delete-dataset-dialog.component';
import { SpConfigurationRoutes } from
'../../../configuration/configuration.breadcrumb';
@@ -85,7 +86,6 @@ import {
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatTooltip } from '@angular/material/tooltip';
import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { NgStyle } from '@angular/common';
import { StyleDirective } from '@ngbracket/ngx-layout/extended';
import { MatMenuItem } from '@angular/material/menu';
@@ -111,7 +111,7 @@ import { DatasetLastEventLabelComponent } from
'./dataset-last-event-label/datas
MatSortHeader,
MatCellDef,
MatCell,
- MatProgressSpinner,
+ SpSpinnerComponent,
FlexOrderDirective,
NgStyle,
StyleDirective,
diff --git
a/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.html
b/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.html
index 232c1c0637..9c5d794892 100644
---
a/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.html
+++
b/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.html
@@ -151,7 +151,7 @@
>
@if (previewLoading()) {
<div section-actions>
- <mat-spinner [diameter]="24"></mat-spinner>
+ <sp-spinner [diameter]="24"></sp-spinner>
</div>
}
diff --git
a/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.ts
b/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.ts
index 02644f9ee8..16593e169e 100644
--- a/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.ts
+++ b/ui/src/app/dataset/dialog/csv-import-dialog/csv-import-dialog.component.ts
@@ -38,7 +38,6 @@ import { MatDivider } from '@angular/material/divider';
import { MatFormField } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatOption, MatSelect } from '@angular/material/select';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatStep, MatStepLabel, MatStepper } from '@angular/material/stepper';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import {
@@ -64,6 +63,7 @@ import {
DialogRef,
FormFieldComponent,
SplitSectionComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { startWith, Subscription, switchMap, timer } from 'rxjs';
import { CsvImportColumnModel, CsvImportColumnRole } from './csv-import.model';
@@ -86,7 +86,7 @@ import { CsvImportUploadStateComponent } from
'./csv-import-upload-state/csv-imp
MatSelect,
MatOption,
MatDivider,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatStepper,
MatStep,
MatStepLabel,
diff --git
a/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.html
b/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.html
index ae5ef9da4f..7d7df03612 100644
---
a/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.html
+++
b/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.html
@@ -56,11 +56,7 @@
data-cy="connection-testing-in-progress"
>
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner
- [mode]="'indeterminate'"
- color="accent"
- diameter="25"
- ></mat-spinner>
+ <sp-spinner diameter="25"></sp-spinner>
</div>
</div>
}
diff --git
a/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.ts
b/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.ts
index 1366d0dac5..20b1500e0e 100644
---
a/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.ts
+++
b/ui/src/app/dataset/dialog/data-retention-now-dialog/data-retention-now-dialog.component.ts
@@ -17,7 +17,11 @@
*/
import { Component, inject, Input, OnInit } from '@angular/core';
-import { DialogRef, SpExceptionDetailsComponent } from
'@streampipes/shared-ui';
+import {
+ DialogRef,
+ SpExceptionDetailsComponent,
+ SpSpinnerComponent,
+} from '@streampipes/shared-ui';
import { DatalakeRestService } from '@streampipes/platform-services';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { finalize } from 'rxjs';
@@ -25,7 +29,6 @@ import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
@@ -35,7 +38,7 @@ import { MatButton } from '@angular/material/button';
imports: [
LayoutAlignDirective,
LayoutDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
MatButton,
TranslatePipe,
diff --git
a/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.html
b/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.html
index 0e8c1a726d..11bc2266a6 100644
---
a/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.html
+++
b/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.html
@@ -83,10 +83,7 @@
data-cy="adapter-deletion-in-progress"
>
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner
- [mode]="'indeterminate'"
- color="accent"
- ></mat-spinner>
+ <sp-spinner></sp-spinner>
</div>
<b
><h4>{{ currentStatus }}</h4></b
diff --git
a/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.ts
b/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.ts
index 847c1942f3..afd60219ee 100644
---
a/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.ts
+++
b/ui/src/app/dataset/dialog/delete-dataset/delete-dataset-dialog.component.ts
@@ -17,7 +17,7 @@
*/
import { Component, inject, Input, OnInit } from '@angular/core';
-import { DialogRef } from '@streampipes/shared-ui';
+import { DialogRef, SpSpinnerComponent } from '@streampipes/shared-ui';
import { DatalakeRestService } from '@streampipes/platform-services';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import {
@@ -26,7 +26,6 @@ import {
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
@Component({
@@ -37,7 +36,7 @@ import { MatDivider } from '@angular/material/divider';
FlexDirective,
LayoutAlignDirective,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
TranslatePipe,
],
diff --git
a/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.html
b/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.html
index 862cd82019..0e2d4261e7 100644
---
a/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.html
+++
b/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.html
@@ -67,10 +67,7 @@
data-cy="adapter-deletion-in-progress"
>
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner
- [mode]="'indeterminate'"
- color="accent"
- ></mat-spinner>
+ <sp-spinner></sp-spinner>
</div>
<b
><h4>{{ currentStatus }}</h4></b
diff --git
a/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.ts
b/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.ts
index ee27fbcc4b..597fb4b8c7 100644
---
a/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.ts
+++
b/ui/src/app/dataset/dialog/delete-export-provider/delete-export-provider-dialog.component.ts
@@ -17,7 +17,7 @@
*/
import { Component, inject, Input } from '@angular/core';
-import { DialogRef } from '@streampipes/shared-ui';
+import { DialogRef, SpSpinnerComponent } from '@streampipes/shared-ui';
import { ExportProviderService } from '@streampipes/platform-services';
import {
FlexDirective,
@@ -25,7 +25,6 @@ import {
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
import { TranslatePipe } from '@ngx-translate/core';
@@ -37,7 +36,7 @@ import { TranslatePipe } from '@ngx-translate/core';
FlexDirective,
LayoutAlignDirective,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
TranslatePipe,
],
diff --git
a/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.html
b/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.html
index a753e674c9..0695b95307 100644
---
a/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.html
+++
b/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.html
@@ -54,11 +54,7 @@
data-cy="connection-testing-in-progress"
>
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner
- [mode]="'indeterminate'"
- color="accent"
- diameter="25"
- ></mat-spinner>
+ <sp-spinner diameter="25"></sp-spinner>
</div>
</div>
}
diff --git
a/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.ts
b/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.ts
index 8ed2242a8e..4ff058a228 100644
---
a/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.ts
+++
b/ui/src/app/dataset/dialog/export-provider-connection-test/export-provider-connection-test.component.ts
@@ -17,14 +17,17 @@
*/
import { Component, inject, Input, OnInit } from '@angular/core';
-import { DialogRef, SpExceptionDetailsComponent } from
'@streampipes/shared-ui';
+import {
+ DialogRef,
+ SpExceptionDetailsComponent,
+ SpSpinnerComponent,
+} from '@streampipes/shared-ui';
import { ExportProviderService } from '@streampipes/platform-services';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
@@ -34,7 +37,7 @@ import { MatButton } from '@angular/material/button';
imports: [
LayoutAlignDirective,
LayoutDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
MatButton,
TranslatePipe,
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
index 380c1af063..b7410ea53d 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
@@ -25,12 +25,10 @@
<div fxFlex="100" fxLayoutAlign="start center" fxLayout="row">
<div fxLayout="row" fxLayoutAlign="start center">
@if (pipelineCacheRunning) {
- <mat-spinner
+ <sp-spinner
data-cy="saving-pipeline-modification"
- [mode]="'indeterminate'"
- color="accent"
[diameter]="15"
- ></mat-spinner>
+ ></sp-spinner>
}
@if (pipelineCacheRunning) {
<span class="modification-status"
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts
index b1de6030d6..cca1d0dcfe 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts
@@ -27,8 +27,8 @@ import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-pipeline-assembly-options-pipeline-cache',
@@ -38,7 +38,7 @@ import { TranslatePipe } from '@ngx-translate/core';
LayoutDirective,
LayoutAlignDirective,
FlexDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
TranslatePipe,
],
})
diff --git
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
index b678246f97..e72c8ba276 100644
---
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
+++
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
@@ -19,10 +19,10 @@
<div class="data-preview">
@if (!runtimeData) {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
- <mat-spinner [diameter]="20" color="accent"></mat-spinner>
- <span class="preview-table text-sm mt-10"
- >{{ 'Waiting for live data' | translate }}...</span
- >
+ <sp-spinner
+ [diameter]="20"
+ [text]="('Waiting for live data' | translate) + '...'"
+ ></sp-spinner>
</div>
}
@if (runtimeData) {
diff --git
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
index 6dc4d14dbf..60a3765ae0 100644
---
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
+++
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
@@ -28,8 +28,8 @@ import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-pipeline-element-preview',
@@ -39,7 +39,7 @@ import { TranslatePipe } from '@ngx-translate/core';
FlexDirective,
LayoutDirective,
LayoutAlignDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
KeyValuePipe,
TranslatePipe,
],
diff --git
a/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
b/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
index 043962a55a..614e932fb4 100644
---
a/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
+++
b/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
@@ -18,12 +18,10 @@
<div style="z-index: 5" [ngClass]="elementCssClasses">
@if (pipelineElementConfig.settings.loadingStatus) {
<div class="pipeline-element-progress-container sp-fade">
- <mat-spinner
- [mode]="'indeterminate'"
+ <sp-spinner
class="pipeline-element-progress"
[diameter]="40"
- color="accent"
- ></mat-spinner>
+ ></sp-spinner>
</div>
}
@if (pipelineElementConfig.settings.loadingStatus) {
diff --git
a/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.ts
b/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.ts
index 5e5bb3fc1d..5add60add7 100644
---
a/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.ts
+++
b/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.ts
@@ -27,8 +27,10 @@ import {
} from '@streampipes/platform-services';
import { NgClass } from '@angular/common';
import { ClassDirective } from '@ngbracket/ngx-layout/extended';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { PipelineElementComponent } from '@streampipes/shared-ui';
+import {
+ PipelineElementComponent,
+ SpSpinnerComponent,
+} from '@streampipes/shared-ui';
import { MatTooltip } from '@angular/material/tooltip';
import { PipelineElementStatisticsComponent } from
'../../pipeline-element-statistics/pipeline-element-statistics.component';
import { PipelineElementOptionsComponent } from
'../../pipeline-element-options/pipeline-element-options.component';
@@ -40,7 +42,7 @@ import { PipelineElementPreviewComponent } from
'../../pipeline-element-preview/
imports: [
NgClass,
ClassDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
PipelineElementComponent,
MatTooltip,
PipelineElementStatisticsComponent,
diff --git a/ui/src/app/editor/editor.component.html
b/ui/src/app/editor/editor.component.html
index 69f45223c6..7f9d539f5e 100644
--- a/ui/src/app/editor/editor.component.html
+++ b/ui/src/app/editor/editor.component.html
@@ -19,12 +19,10 @@
<div fxLayout="column" fxFlex="100" class="pipeline-editor-outer">
@if (!allElementsLoaded) {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
- <mat-spinner
+ <sp-spinner
[diameter]="30"
- color="accent"
- mode="indeterminate"
- ></mat-spinner>
- <p>{{ 'Preparing pipeline editor...' | translate }}</p>
+ [text]="'Preparing pipeline editor...' | translate"
+ ></sp-spinner>
</div>
} @else {
<div fxLayout="row" fxFlex="100">
diff --git a/ui/src/app/editor/editor.component.ts
b/ui/src/app/editor/editor.component.ts
index b831c54554..c6a002e451 100644
--- a/ui/src/app/editor/editor.component.ts
+++ b/ui/src/app/editor/editor.component.ts
@@ -31,6 +31,7 @@ import {
import {
SpBasicViewComponent,
SpBreadcrumbService,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { ActivatedRoute } from '@angular/router';
import { forkJoin, of, zip } from 'rxjs';
@@ -43,7 +44,6 @@ import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { PipelineElementIconStandComponent } from
'./components/pipeline-element-icon-stand/pipeline-element-icon-stand.component';
import { PipelineAssemblyComponent } from
'./components/pipeline-assembly/pipeline-assembly.component';
import { TranslatePipe } from '@ngx-translate/core';
@@ -56,7 +56,7 @@ import { TranslatePipe } from '@ngx-translate/core';
LayoutDirective,
FlexDirective,
LayoutAlignDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpBasicViewComponent,
PipelineElementIconStandComponent,
PipelineAssemblyComponent,
diff --git a/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.html
b/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.html
index 90c028bd2c..ee30228481 100644
--- a/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.html
+++ b/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.html
@@ -41,8 +41,12 @@
fxLayoutAlign="center center"
fxLayoutGap="10px"
>
- <mat-spinner [diameter]="20"></mat-spinner>
- <span>Checking tutorial pipeline elements...</span>
+ <sp-spinner
+ [diameter]="20"
+ layout="row"
+ gap="10px"
+ text="Checking tutorial pipeline elements..."
+ ></sp-spinner>
</div>
}
@if (showMissingElementsHint) {
diff --git a/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.ts
b/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.ts
index 8e57d2e7f4..f973087899 100644
--- a/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.ts
+++ b/ui/src/app/home/dialog/welcome-tour/welcome-tour.component.ts
@@ -21,6 +21,7 @@ import {
DialogService,
PanelType,
SpAlertBannerComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { Component, Input, OnInit, inject } from '@angular/core';
import { AppConstants } from '../../../services/app.constants';
@@ -41,7 +42,6 @@ import {
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
import { MatDivider } from '@angular/material/divider';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MissingElementsForTutorialComponent } from
'../../../editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component';
import { forkJoin } from 'rxjs';
import { LayoutGapDirective } from '@ngbracket/ngx-layout';
@@ -56,7 +56,7 @@ import { LayoutGapDirective } from '@ngbracket/ngx-layout';
LayoutAlignDirective,
MatButton,
MatDivider,
- MatProgressSpinner,
+ SpSpinnerComponent,
LayoutGapDirective,
SpAlertBannerComponent,
],
diff --git a/ui/src/app/login/components/login/login.component.html
b/ui/src/app/login/components/login/login.component.html
index eb1c81c70c..8af90af921 100644
--- a/ui/src/app/login/components/login/login.component.html
+++ b/ui/src/app/login/components/login/login.component.html
@@ -66,11 +66,10 @@
}
</button>
@if (loading) {
- <mat-spinner
- [mode]="'indeterminate'"
+ <sp-spinner
[diameter]="20"
style="margin-top: 10px"
- ></mat-spinner>
+ ></sp-spinner>
}
@if (authenticationFailed) {
<sp-alert-banner
diff --git a/ui/src/app/login/components/login/login.component.ts
b/ui/src/app/login/components/login/login.component.ts
index 5f78b3cbff..2734737997 100644
--- a/ui/src/app/login/components/login/login.component.ts
+++ b/ui/src/app/login/components/login/login.component.ts
@@ -37,12 +37,12 @@ import {
import {
FormFieldComponent,
SpAlertBannerComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { MatFormField } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatButton } from '@angular/material/button';
import { MatCheckbox } from '@angular/material/checkbox';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
@@ -61,7 +61,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatInput,
MatButton,
MatCheckbox,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpAlertBannerComponent,
RouterLink,
TranslatePipe,
diff --git a/ui/src/app/login/components/register/register.component.html
b/ui/src/app/login/components/register/register.component.html
index 3d596b3d87..59a7585359 100644
--- a/ui/src/app/login/components/register/register.component.html
+++ b/ui/src/app/login/components/register/register.component.html
@@ -77,12 +77,10 @@
</button>
}
@if (registrationInProcess) {
- <mat-spinner
- [mode]="'indeterminate'"
- color="accent"
+ <sp-spinner
[diameter]="20"
style="margin-top: 10px"
- ></mat-spinner>
+ ></sp-spinner>
}
@if (registrationError) {
<sp-alert-banner
diff --git a/ui/src/app/login/components/register/register.component.ts
b/ui/src/app/login/components/register/register.component.ts
index 8d7f4b45ad..b9a0004511 100644
--- a/ui/src/app/login/components/register/register.component.ts
+++ b/ui/src/app/login/components/register/register.component.ts
@@ -37,11 +37,11 @@ import {
import {
FormFieldComponent,
SpAlertBannerComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { MatError, MatFormField } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { RouterLink } from '@angular/router';
import { TranslatePipe } from '@ngx-translate/core';
@@ -61,7 +61,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatInput,
MatError,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpAlertBannerComponent,
RouterLink,
TranslatePipe,
diff --git
a/ui/src/app/login/components/set-new-password/set-new-password.component.html
b/ui/src/app/login/components/set-new-password/set-new-password.component.html
index 8c50d48fe2..28bd4a32ac 100644
---
a/ui/src/app/login/components/set-new-password/set-new-password.component.html
+++
b/ui/src/app/login/components/set-new-password/set-new-password.component.html
@@ -61,12 +61,10 @@
</button>
}
@if (resetInProgress) {
- <mat-spinner
- [mode]="'indeterminate'"
- color="accent"
+ <sp-spinner
[diameter]="20"
style="margin-top: 10px"
- ></mat-spinner>
+ ></sp-spinner>
}
@if (resetPerformed && !resetSuccess) {
<sp-alert-banner
diff --git
a/ui/src/app/login/components/set-new-password/set-new-password.component.ts
b/ui/src/app/login/components/set-new-password/set-new-password.component.ts
index ae43729b7f..f8489371de 100644
--- a/ui/src/app/login/components/set-new-password/set-new-password.component.ts
+++ b/ui/src/app/login/components/set-new-password/set-new-password.component.ts
@@ -39,11 +39,11 @@ import {
import {
FormFieldComponent,
SpAlertBannerComponent,
+ SpSpinnerComponent,
} from '@streampipes/shared-ui';
import { MatFormField } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
@@ -61,7 +61,7 @@ import { TranslatePipe } from '@ngx-translate/core';
MatFormField,
MatInput,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
SpAlertBannerComponent,
RouterLink,
TranslatePipe,
diff --git a/ui/src/app/login/components/setup/setup.component.html
b/ui/src/app/login/components/setup/setup.component.html
index 34f5dd47f1..048451fe07 100644
--- a/ui/src/app/login/components/setup/setup.component.html
+++ b/ui/src/app/login/components/setup/setup.component.html
@@ -124,12 +124,11 @@
</div>
<div fxFlex="20" style="width: 50%">
@if (loading) {
- <mat-spinner
+ <sp-spinner
class="md-accent"
- [mode]="'indeterminate'"
[diameter]="20"
style="margin-top: 10px"
- ></mat-spinner>
+ ></sp-spinner>
}
</div>
</div>
diff --git a/ui/src/app/login/components/setup/setup.component.ts
b/ui/src/app/login/components/setup/setup.component.ts
index 195cdcb8db..2bafe88bb2 100644
--- a/ui/src/app/login/components/setup/setup.component.ts
+++ b/ui/src/app/login/components/setup/setup.component.ts
@@ -31,9 +31,9 @@ import { MatFormField, MatLabel } from
'@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
+import { SpSpinnerComponent } from '@streampipes/shared-ui';
@Component({
selector: 'sp-setup',
@@ -49,7 +49,7 @@ import { MatButton } from '@angular/material/button';
MatInput,
MatCheckbox,
MatIcon,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
MatButton,
],
diff --git
a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
index 476d67b0cf..757da8ac03 100644
---
a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
+++
b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
@@ -82,11 +82,7 @@
@if (isInProgress) {
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner
- [diameter]="50"
- [mode]="'indeterminate'"
- color="accent"
- ></mat-spinner>
+ <sp-spinner [diameter]="50"></sp-spinner>
</div>
<b
><h4>{{ currentStatus }}</h4></b
diff --git
a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
index b9745659a6..8d1287dd80 100644
---
a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
+++
b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
@@ -18,7 +18,7 @@
import { Component, inject, Input } from '@angular/core';
import { PipelineService } from '@streampipes/platform-services';
-import { DialogRef } from '@streampipes/shared-ui';
+import { DialogRef, SpSpinnerComponent } from '@streampipes/shared-ui';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import {
FlexDirective,
@@ -26,7 +26,6 @@ import {
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatDivider } from '@angular/material/divider';
@Component({
@@ -37,7 +36,7 @@ import { MatDivider } from '@angular/material/divider';
FlexDirective,
LayoutAlignDirective,
MatButton,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatDivider,
TranslatePipe,
],
diff --git
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
index ed50403646..3f14113558 100644
---
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
+++
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
@@ -38,7 +38,7 @@
</div>
} @else {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start center">
- <mat-spinner [diameter]="20"></mat-spinner>
+ <sp-spinner [diameter]="20"></sp-spinner>
</div>
}
</div>
diff --git
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
index e0f3f41932..d13b09b64a 100644
---
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
+++
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { DialogRef } from '@streampipes/shared-ui';
+import { DialogRef, SpSpinnerComponent } from '@streampipes/shared-ui';
import {
Pipeline,
PipelineService,
@@ -27,7 +27,6 @@ import { FlexDirective, LayoutDirective } from
'@ngbracket/ngx-layout/flex';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
import { TranslatePipe } from '@ngx-translate/core';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { LayoutAlignDirective } from '@ngbracket/ngx-layout';
@Component({
@@ -40,7 +39,7 @@ import { LayoutAlignDirective } from '@ngbracket/ngx-layout';
MatDivider,
MatButton,
TranslatePipe,
- MatProgressSpinner,
+ SpSpinnerComponent,
LayoutAlignDirective,
],
})
diff --git
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
index cd69fe8960..7a43aacf1f 100644
---
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
+++
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
@@ -30,18 +30,15 @@
fxLayout="column"
>
<div fxFlex="100" fxLayoutAlign="center center">
- <mat-spinner
- color="accent"
+ <sp-spinner
[diameter]="30"
- fxLayoutAlign="center"
style="margin: 10px 0 5px 0"
- >
- @if (action === 0) {
- {{ 'Starting' | translate }}
- } @else {
- {{ 'Stopping' | translate }}
- }
- </mat-spinner>
+ [text]="
+ action === 0
+ ? ('Starting' | translate)
+ : ('Stopping' | translate)
+ "
+ ></sp-spinner>
</div>
<div
fxFlex="100"
diff --git
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
index d99b87d832..42a87f3d42 100644
---
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
+++
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { DialogRef } from '@streampipes/shared-ui';
+import { DialogRef, SpSpinnerComponent } from '@streampipes/shared-ui';
import {
PipelineOperationStatus,
PipelineService,
@@ -29,7 +29,6 @@ import {
LayoutAlignDirective,
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatIcon } from '@angular/material/icon';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
@@ -43,7 +42,7 @@ import { PipelineStartedStatusComponent } from
'../../../core-ui/pipeline/pipeli
LayoutDirective,
LayoutAlignDirective,
FlexDirective,
- MatProgressSpinner,
+ SpSpinnerComponent,
MatIcon,
MatDivider,
MatButton,
