chore(edit-content): add loading in nodes #28645

dotCMS · Jun 7, 2024 · f75b1a2 · f75b1a2
1 parent a9e75f1
commit f75b1a2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/...elds/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.html b/...elds/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.html
@@ -8,4 +8,11 @@
     <ng-template let-node pTemplate="default">
         <span>{{ node.label | truncatePath }}</span>
     </ng-template>
+    <ng-template pTemplate="triggericon">
+        @if (sitesStatus() === 'loading') {
+            <i class="pi pi-spin pi-spinner"></i>
+        } @else {
+            <i class="pi pi-chevron-down"></i>
+        }
+    </ng-template>
 </p-treeSelect>
diff --git a/...fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts b/...fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts
@@ -15,6 +15,7 @@ import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 
 import { DotEditContentFieldSingleSelectableDataTypes } from '../../models/dot-edit-content-field.type';
 import {
+    StatusRequest,
     TreeNodeItem,
     TreeNodeSelectItem
 } from '../../models/dot-edit-content-host-folder-field.interface';
@@ -43,12 +44,20 @@ export class DotEditContentHostFolderFieldComponent implements OnInit {
     readonly #editContentService = inject(DotEditContentService);
 
     options = signal<TreeNodeItem[]>([]);
+    sitesStatus = signal<StatusRequest>('init');
     pathControl = new FormControl();
 
     ngOnInit() {
-        this.#editContentService.getSitesTreePath().subscribe((options) => {
-            this.options.set(options);
-            this.getInitialValue();
+        this.sitesStatus.set('loading');
+        this.#editContentService.getSitesTreePath().subscribe({
+            next: (options) => {
+                this.options.set(options);
+                this.getInitialValue();
+                this.sitesStatus.set('success');
+            },
+            error: () => {
+                this.sitesStatus.set('failed');
+            }
         });
     }
 

diff --git a/core-web/libs/edit-content/src/lib/models/dot-edit-content-host-folder-field.interface.ts b/core-web/libs/edit-content/src/lib/models/dot-edit-content-host-folder-field.interface.ts
@@ -4,6 +4,8 @@ export type TreeNodeData = { type: 'site' | 'folder'; path: string; hostname: st
 
 export type TreeNodeItem = TreeNode<TreeNodeData>;
 
+export type StatusRequest = 'init' | 'loading' | 'success' | 'failed';
+
 export type TreeNodeSelectItem = TreeNodeSelectEvent<TreeNodeData>;
 
 export interface TreeNodeSelectEvent<T> {