feat(edit-content) add loading skeleton to category columns #29265

dotCMS · Jul 18, 2024 · d928a39 · d928a39
1 parent c14aa55
commit d928a39
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 16 deletions.
diff --git a/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html b/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html
@@ -1,8 +1,8 @@
 <div class="w-full category-list__header">Root</div>
 <div
-    [ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }"
+    [ngClass]="{ 'no-overflow-x-yet': $emptyColumns().length }"
     class="flex-1 category-list__category-list">
-    @for (column of categories(); let index = $index; track index) {
+    @for (column of $categories(); let index = $index; track index) {
     <!--dynamic columns-->
     <div #categoryColumn class="category-list__category-column" data-testId="category-column">
         @for (item of column; track item.key) {
@@ -32,12 +32,14 @@
         </div>
         }
     </div>
-    }
+    } @empty { @if (!$isLoading()) { No categories } }
 
     <!--Fake empty columns-->
-    @for (_ of emptyColumns(); track _) {
-    <div
-        class="flex-grow-1 category-list__category-column"
-        data-testId="category-column-empty"></div>
+    @for (_ of $emptyColumns(); track $index) {
+    <div class="flex-grow-1 category-list__category-column" data-testId="category-column-empty">
+        @if ($isLoading() && 0 === $index) {
+        <dot-category-field-list-skeleton />
+        }
+    </div>
     }
 </div>
diff --git a/...components/dot-category-field-category-list/dot-category-field-category-list.component.ts b/...components/dot-category-field-category-list/dot-category-field-category-list.component.ts
@@ -23,6 +23,7 @@ import { CheckboxModule } from 'primeng/checkbox';
 import { TreeModule } from 'primeng/tree';
 
 import { DotCategoryFieldKeyValueObj } from '../../models/dot-category-field.models';
+import { DotCategoryFieldListSkeletonComponent } from '../dot-category-field-list-skeleton/dot-category-field-list-skeleton.component';
 
 export const MINIMUM_CATEGORY_COLUMNS = 4;
 
@@ -36,7 +37,14 @@ const MINIMUM_CATEGORY_WITHOUT_SCROLLING = 3;
 @Component({
     selector: 'dot-category-field-category-list',
     standalone: true,
-    imports: [CommonModule, TreeModule, CheckboxModule, ButtonModule, FormsModule],
+    imports: [
+        CommonModule,
+        TreeModule,
+        CheckboxModule,
+        ButtonModule,
+        FormsModule,
+        DotCategoryFieldListSkeletonComponent
+    ],
     templateUrl: './dot-category-field-category-list.component.html',
     styleUrl: './dot-category-field-category-list.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -53,25 +61,30 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     /**
      * Represents the variable 'categories' which is of type 'DotCategoryFieldCategory[][]'.
      */
-    categories = input.required<DotCategoryFieldKeyValueObj[][]>();
+    $categories = input.required<DotCategoryFieldKeyValueObj[][]>({ alias: 'categories' });
 
     /**
      * Represent the selected item saved in the contentlet
      */
-    selected = input.required<string[]>();
+    $selected = input.required<string[]>({ alias: 'selected' });
 
     /**
      * Generate the empty columns
      */
-    emptyColumns = computed(() => {
+    $emptyColumns = computed(() => {
         const numberOfEmptyColumnsNeeded = Math.max(
-            MINIMUM_CATEGORY_COLUMNS - this.categories().length,
+            MINIMUM_CATEGORY_COLUMNS - this.$categories().length,
             0
         );
 
         return Array(numberOfEmptyColumnsNeeded).fill(null);
     });
 
+    /**
+     * Represents a variable indicating if the component is in loading state.
+     */
+    $isLoading = input.required<boolean>({ alias: 'isLoading' });
+
     /**
      * Emit the item clicked to the parent component
      */
@@ -91,13 +104,11 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     itemsSelected: string[];
 
     #cdr = inject(ChangeDetectorRef);
-
     readonly #destroyRef = inject(DestroyRef);
-
     readonly #effectRef = effect(() => {
         // Todo: change itemsSelected to use model when update Angular to >17.3
         // Initial selected items from the contentlet
-        this.itemsSelected = this.selected();
+        this.itemsSelected = this.$selected();
         this.#cdr.markForCheck(); // force refresh
     });
 

diff --git a/...components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts b/...components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts
@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+import { SkeletonModule } from 'primeng/skeleton';
+
+@Component({
+    selector: 'dot-category-field-list-skeleton',
+    standalone: true,
+    imports: [CommonModule, SkeletonModule],
+    template: `
+        <ul class="m-0 p-1 list-none">
+            @for (_ of $rows(); track $index) {
+            <li class="flex">
+                <p-skeleton size="1rem" styleClass="mr-2"></p-skeleton>
+                <div style="flex: 1">
+                    <p-skeleton width="100%"></p-skeleton>
+                </div>
+            </li>
+            }
+        </ul>
+    `,
+    styles: `
+
+
+        li {
+            min-height: 40px;
+            align-content: center;
+            flex-wrap: wrap;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotCategoryFieldListSkeletonComponent {
+    /**
+     * Represents the number of rows for a specific operation.
+     */
+    $numOfRows = input<number>(5, { alias: 'rows' });
+
+    /**
+     * The $rows variable represents a computed array of null values.
+     */
+    $rows = computed(() => {
+        return Array(this.$numOfRows()).fill(null);
+    });
+}
diff --git a/...ory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html b/...ory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
@@ -32,9 +32,11 @@
             <div class="flex-grow-1 category-field__categories">
                 @if (store.mode() === 'list') {
                 <dot-category-field-category-list
+                    @fadeAnimation
                     (itemChecked)="store.updateSelected($event.selected, $event.item)"
                     (rowClicked)="store.getCategories($event)"
                     [categories]="store.categoryList()"
+                    [isLoading]="store.isListLoading()"
                     [selected]="store.selectedCategoriesValues()" />
                 } @else {
                 <dot-category-field-search-list

diff --git a/...tent/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts b/...tent/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts
@@ -88,7 +88,16 @@ export const CategoryFieldStore = signalStore(
          */
         fieldVariableName: computed(() => store.field().variable),
 
-        // Search
+        /**
+         * Determines if the list mode is currently loading.
+         */
+        isListLoading: computed(
+            () => store.mode() === 'list' && store.state() === ComponentStatus.LOADING
+        ),
+
+        /**
+         * Determines if the search mode is currently loading.
+         */
         isSearchLoading: computed(
             () => store.mode() === 'search' && store.state() === ComponentStatus.LOADING
         ),