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.
\n
https://google.com/maps/place/XXX
\n
Either « 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); }, });