diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73207ee4ce..11cae3d5e6 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/libs/ui/src/lib/file-drop-area/file-drop-area.component.html b/libs/ui/src/lib/file-drop-area/file-drop-area.component.html
index b5c6e19021..a4d1d6c91e 100644
--- a/libs/ui/src/lib/file-drop-area/file-drop-area.component.html
+++ b/libs/ui/src/lib/file-drop-area/file-drop-area.component.html
@@ -1,13 +1,14 @@
@if (isLoading()) {
-
-
-
{{ loadingText() }}
+
+
+ {{ loadingText() }}
+
} @else {
';
+}
: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;
- }
-
- .mat-mdc-progress-spinner {
- @include mat.progress-spinner-overrides(
- (
- active-indicator-color: var(--gf-theme-primary-500)
- )
- );
-
- margin: 0.625rem 0;
+ font-size: var(--cloud-icon-size);
}
}
}
: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);
+ }
+}
diff --git a/libs/ui/src/lib/file-drop-area/file-drop-area.component.stories.ts b/libs/ui/src/lib/file-drop-area/file-drop-area.component.stories.ts
index eeee334b07..5d14f276ab 100644
--- a/libs/ui/src/lib/file-drop-area/file-drop-area.component.stories.ts
+++ b/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
- }
-};
diff --git a/libs/ui/src/lib/file-drop-area/file-drop-area.component.ts b/libs/ui/src/lib/file-drop-area/file-drop-area.component.ts
index f63730e533..d6cc328b64 100644
--- a/libs/ui/src/lib/file-drop-area/file-drop-area.component.ts
+++ b/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'