Task/improve loading state of file drop area component (#8250)

* Improve loading state

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the usability of the activities page by eliminating the reload on canceling the import activities dialog
+- Improved the loading state of the file drop area component
 - Improved the accessibility of the _Buy me a coffee_ button on the about page
 - Improved the accessibility of the entity logo component
 - Extracted the file drop area of the import activities dialog to a reusable component

libs/ui/src/lib/file-drop-area/file-drop-area.component.html

@@ -1,13 +1,14 @@
 @if (isLoading()) {
+  <div class="aura" role="progressbar" [attr.aria-label]="loadingText()">
     <div
-    class="align-items-center d-flex drop-area flex-column justify-content-center p-4 text-body-secondary text-center"
+      class="align-items-center d-flex drop-area flex-column justify-content-center rounded text-body-secondary text-center"
     >
-    <mat-spinner [diameter]="20" />
       <span>{{ loadingText() }}</span>
     </div>
+  </div>
 } @else {
   <button
-    class="drop-area p-4 text-body-secondary text-center"
+    class="drop-area rounded text-body-secondary text-center"
     type="button"
     (click)="onSelectFile()"
     (dragenter)="onDragEnter($event)"

libs/ui/src/lib/file-drop-area/file-drop-area.component.scss

@@ -1,10 +1,71 @@
-@use '@angular/material' as mat;
+@property --aura-angle {
+  inherits: true;
+  initial-value: 0deg;
+  syntax: '<angle>';
+}
 
 :host {
+  --aura-padding: 0.125rem;
+  --cloud-icon-size: 2.5rem;
+  --drop-area-padding: 1.5rem;
+
   a {
     color: rgba(var(--palette-primary-500), 1);
   }
 
+  // Based on the aura component of daisyUI (https://daisyui.com/components/aura)
+  .aura {
+    --aura-duration: 4000ms;
+
+    animation: aura var(--aura-duration) linear infinite;
+    background-image: repeating-conic-gradient(
+      from var(--aura-angle),
+      transparent 0%,
+      transparent 40%,
+      rgba(var(--palette-primary-500), 1) 50%
+    );
+    border-radius: calc(var(--bs-border-radius) + var(--aura-padding));
+    padding: var(--aura-padding);
+    position: relative;
+
+    &::after,
+    &::before {
+      animation: inherit;
+      background-image: inherit;
+      border-radius: inherit;
+      content: '';
+      inset: 0;
+      position: absolute;
+    }
+
+    &::after {
+      filter: blur(1rem);
+      opacity: 0.3;
+    }
+
+    &::before {
+      filter: blur(0.25rem);
+      opacity: 0.7;
+    }
+
+    .drop-area {
+      background-color: var(--light-background);
+      border-style: solid;
+      margin: 0;
+      // Keep the height of the drop area with the cloud icon
+      padding-block: calc(
+        var(--drop-area-padding) + (var(--cloud-icon-size) / 2)
+      );
+      pointer-events: none;
+      position: relative;
+      z-index: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
   .drop-area {
     background-color: rgba(var(--palette-foreground-base), 0.02);
     border: 1px dashed
@@ -12,7 +73,9 @@
         var(--palette-foreground-divider),
         var(--palette-foreground-divider-alpha)
       );
-    border-radius: 0.25rem;
+    // Reserve the space of the aura
+    margin: var(--aura-padding);
+    padding: var(--drop-area-padding);
 
     &:hover {
       border-color: rgba(var(--palette-primary-500), 1) !important;
@@ -20,22 +83,18 @@
     }
 
     .cloud-icon {
-      font-size: 2.5rem;
+      font-size: var(--cloud-icon-size);
-    }
-
-    .mat-mdc-progress-spinner {
-      @include mat.progress-spinner-overrides(
-        (
-          active-indicator-color: var(--gf-theme-primary-500)
-        )
-      );
-
-      margin: 0.625rem 0;
     }
   }
 }
 
 :host-context(.theme-dark) {
+  .aura {
+    .drop-area {
+      background-color: var(--dark-background);
+    }
+  }
+
   .drop-area {
     border-color: rgba(
       var(--palette-foreground-divider-dark),
@@ -43,3 +102,12 @@
     );
   }
 }
+
+@keyframes aura {
+  to {
+    --aura-angle: 360deg;
+
+    // Force the GPU acceleration to prevent lags in Safari
+    transform: translateZ(1px);
+  }
+}

libs/ui/src/lib/file-drop-area/file-drop-area.component.stories.ts

@@ -47,9 +47,3 @@ export const Loading: Story = {
     isLoading: true
   }
 };
-
-export const WithGhostfolioAi: Story = {
-  args: {
-    fileFormats: FILE_FORMATS_WITH_GHOSTFOLIO_AI
-  }
-};

libs/ui/src/lib/file-drop-area/file-drop-area.component.ts

@@ -7,7 +7,6 @@ import {
   input,
   output
 } from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { cloudUploadOutline } from 'ionicons/icons';
@@ -20,7 +19,7 @@ import { FileFormat } from './interfaces/interfaces';
     '(document:paste)': 'onPaste($event)',
     class: 'd-flex flex-column'
   },
-  imports: [IonIcon, MatProgressSpinnerModule],
+  imports: [IonIcon],
   selector: 'gf-file-drop-area',
   styleUrls: ['./file-drop-area.component.scss'],
   templateUrl: './file-drop-area.component.html'