Extend import of activities with Ghostfolio AI

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -57,7 +57,6 @@ import {
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { PageEvent } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -94,7 +93,6 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces';
     MatDialogModule,
     MatExpansionModule,
     MatFormFieldModule,
-    MatProgressBarModule,
     MatProgressSpinnerModule,
     MatSelectModule,
     MatStepperModule,

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -76,9 +76,11 @@
         } @else {
           <div class="d-flex flex-column justify-content-center">
             @if (isLoading) {
-              <div class="drop-area p-4 text-center text-muted">
+              <div
-                <span i18n>Ghostfolio AI is reading the file...</span>
+                class="align-items-center d-flex drop-area flex-column justify-content-center p-4 text-center text-muted"
-                <mat-progress-bar class="mt-3" mode="indeterminate" />
+              >
+                <mat-spinner [diameter]="20" />
+                <span i18n>Ghostfolio AI is processing the file...</span>
               </div>
             } @else {
               <button
@@ -140,6 +142,7 @@
                 <span
                   class="align-items-center d-flex"
                   matTooltipPosition="above"
+                  [class.text-muted]="isLoading"
                   [matTooltip]="ghostfolioAiTooltip"
                 >
                   <ion-icon name="information-circle-outline" />
@@ -191,7 +194,7 @@
               <div class="align-items-center d-flex mb-3 pl-1">
                 <ion-icon class="mr-2" name="warning-outline" />
                 <span i18n
-                  >Ghostfolio AI has read the maximum of
+                  >Ghostfolio AI has processed the maximum of
                   {{ maxActivitiesOfGhostfolioAi }} activities. The file can
                   have more activities.</span
                 >

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss

@@ -42,12 +42,24 @@
       .cloud-icon {
         font-size: 2.5rem;
       }
-    }
 
+      .mat-mdc-form-field {
         .mat-mdc-progress-spinner {
           right: 1.5rem;
           top: calc(50% - 10px);
         }
+      }
+
+      .mat-mdc-progress-spinner {
+        @include mat.progress-spinner-overrides(
+          (
+            active-indicator-color: var(--gf-theme-primary-500)
+          )
+        );
+
+        margin: 0.625rem 0;
+      }
+    }
 
     .mat-expansion-panel {
       @include mat.expansion-overrides(