diff --git a/src/src/app/modals/place-create-modal/place-create-modal.component.html b/src/src/app/modals/place-create-modal/place-create-modal.component.html
index e4f0c23..52f55bd 100644
--- a/src/src/app/modals/place-create-modal/place-create-modal.component.html
+++ b/src/src/app/modals/place-create-modal/place-create-modal.component.html
@@ -6,9 +6,16 @@
(keydown.control.enter)="closeDialog()" />
-
+
+ @if (gmapsLoading) {
+
+ } @else {
+
+ }
+
diff --git a/src/src/app/modals/place-create-modal/place-create-modal.component.scss b/src/src/app/modals/place-create-modal/place-create-modal.component.scss
index ec08078..da859d8 100644
--- a/src/src/app/modals/place-create-modal/place-create-modal.component.scss
+++ b/src/src/app/modals/place-create-modal/place-create-modal.component.scss
@@ -14,3 +14,40 @@
.p-floatlabel:has(.p-inputwrapper-focus) input::placeholder {
color: var(--p-inputtext-placeholder-color) !important;
}
+
+svg {
+ width: 2rem;
+ animation: loading-rotate 1.5s linear infinite;
+}
+
+circle {
+ fill: none;
+ stroke: #4f46e5;
+ stroke-width: 2;
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ stroke-linecap: round;
+ animation: loading-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes loading-rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes loading-dash {
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ }
+
+ 50% {
+ stroke-dasharray: 90, 200;
+ stroke-dashoffset: -35px;
+ }
+
+ 100% {
+ stroke-dashoffset: -125px;
+ }
+}
\ No newline at end of file
diff --git a/src/src/app/modals/place-create-modal/place-create-modal.component.ts b/src/src/app/modals/place-create-modal/place-create-modal.component.ts
index 9928049..167c95c 100644
--- a/src/src/app/modals/place-create-modal/place-create-modal.component.ts
+++ b/src/src/app/modals/place-create-modal/place-create-modal.component.ts
@@ -47,6 +47,7 @@ export class PlaceCreateModalComponent {
categories$?: Observable;
previous_image_id: number | null = null;
previous_image: string | null = null;
+ gmapsLoading = false;
placeInputTooltip: string =
"You can paste a Google Maps Place link to fill Name, Place, Lat, Lng.
\nhttps://google.com/maps/place/XXX
\nEither « click » on a point of interest or « search » for it (eg: British Museum) and copy the URL
";
@@ -209,23 +210,27 @@ export class PlaceCreateModalComponent {
gmapsToForm(r: GooglePlaceResult) {
this.placeForm.patchValue({ ...r, lat: formatLatLng(r.lat), lng: formatLatLng(r.lng), place: r.name || '' });
this.placeForm.get('category')?.markAsDirty();
-
+ this.gmapsLoading = false;
if (r.category) {
- this.categories$?.pipe(take(1)).subscribe({next: categories => {
- const category: Category | undefined = categories.find(c => c.name == r.category);
- if (!category) return;
- this.placeForm.get('category')?.setValue(category.id);
- }})
+ this.categories$?.pipe(take(1)).subscribe({
+ next: categories => {
+ const category: Category | undefined = categories.find(c => c.name == r.category);
+ if (!category) return;
+ this.placeForm.get('category')?.setValue(category.id);
+ }
+ })
}
}
gmapsSearchText() {
+ this.gmapsLoading = true;
const query = this.placeForm.get('name')?.value;
if (!query) return;
this.apiService.gmapsSearchText(query).subscribe({
next: (results) => {
if (!results.length) {
this.utilsService.toast('warn', 'No result', 'No result available for this autocompletion');
+ this.gmapsLoading = false;
return;
}
@@ -250,7 +255,10 @@ export class PlaceCreateModalComponent {
modal.onClose.pipe(take(1)).subscribe({
next: (result: GooglePlaceResult | null) => {
- if (!result) return;
+ if (!result) {
+ this.gmapsLoading = false;
+ return;
+ }
this.gmapsToForm(result);
},
});