diff --git a/src/app/features/home/details/details.page.html b/src/app/features/home/details/details.page.html
index 0130c2953..46c53a09c 100644
--- a/src/app/features/home/details/details.page.html
+++ b/src/app/features/home/details/details.page.html
@@ -46,18 +46,15 @@
"
>
-
-
-
+
@@ -83,7 +80,10 @@
src="/assets/images/media-id-solid-black.svg"
slot="start"
>
-
+
{{ detailedCapture.id }}
diff --git a/src/app/features/home/details/details.page.scss b/src/app/features/home/details/details.page.scss
index 6d51b717f..372bc3b0b 100644
--- a/src/app/features/home/details/details.page.scss
+++ b/src/app/features/home/details/details.page.scss
@@ -16,6 +16,13 @@
height: 100%;
overflow: auto;
+ app-media {
+ min-height: 50%;
+ height: 50%;
+ object-fit: cover;
+ object-position: center;
+ }
+
ion-item {
--padding-start: 48px;
--padding-end: 48px;
diff --git a/src/app/shared/media/component/media.component.scss b/src/app/shared/media/component/media.component.scss
index 0f132d5a9..2ef957e43 100644
--- a/src/app/shared/media/component/media.component.scss
+++ b/src/app/shared/media/component/media.component.scss
@@ -1,6 +1,7 @@
:host {
display: block;
object-fit: contain;
+ animation: loading 2.5s ease-in-out alternate infinite;
}
img,
diff --git a/src/global.scss b/src/global.scss
index 879ce4cc7..68bafb3a9 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -82,3 +82,13 @@ ion-button {
color: white;
}
}
+
+@keyframes loading {
+ 0% {
+ background-color: var(--loading-background-start);
+ }
+
+ 100% {
+ background-color: var(--loading-background-end);
+ }
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ec7aef35e..16e39c581 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -176,6 +176,10 @@ $app-theme: mat-light-theme(
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
+
+ // loading animation
+ --loading-background-start: var(--ion-color-light-shade);
+ --loading-background-end: var(--ion-color-light);
}
@media (prefers-color-scheme: dark) {
@@ -239,6 +243,10 @@ $app-theme: mat-light-theme(
--ion-color-light-contrast-rgb: 255, 255, 255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
+
+ // loading animation
+ --loading-background-start: var(--ion-color-step-150);
+ --loading-background-end: var(--ion-color-step-100);
}
/*