implementation(fix): #29564 blinking effect during category loading (#…

…29591) ### Proposed Changes Categories now load correctly: https://github.com/user-attachments/assets/c42c2a27-aa24-484c-abc1-d73500972941
dotCMS · Aug 15, 2024 · 936a75c · 936a75c
1 parent d9fcd27
commit 936a75c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 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
@@ -59,6 +59,6 @@
             </div>
         }
     </div>
-} @else {
+} @else if (!$isInitialState) {
     <dot-empty-container [configuration]="$emptyState()" [hideContactUsLink]="true" />
 }
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
@@ -98,6 +98,11 @@ export class DotCategoryFieldCategoryListComponent {
      */
     $isLoading = input<boolean>(true, { alias: 'isLoading' });
 
+    /**
+     * Represents a variable indicating if the component is in initial state.
+     */
+    $isInitialState = input<boolean>(true, { alias: 'isInitialState' });
+
     /**
      * Represents the breadcrumbs to display
      */

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,16 +32,15 @@
             </div>
             <div class="flex-grow-1 category-field__categories">
                 @if (store.mode() === 'list') {
-                    @if (store.isListLoaded()) {
-                        <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()"
-                            [breadcrumbs]="store.breadcrumbMenu()" />
-                    }
+                    <dot-category-field-category-list
+                        @fadeAnimation
+                        (itemChecked)="store.updateSelected($event.selected, $event.item)"
+                        (rowClicked)="store.getCategories($event)"
+                        [categories]="store.categoryList()"
+                        [isLoading]="store.isListLoading()"
+                        [isInitialState]="store.isInitSate()"
+                        [selected]="store.selectedCategoriesValues()"
+                        [breadcrumbs]="store.breadcrumbMenu()" />
                 } @else {
                     <dot-category-field-search-list
                         @fadeAnimation

diff --git a/...src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts b/...src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts
@@ -50,7 +50,7 @@ describe('CategoryFieldStore', () => {
     it('should initialize with default state', () => {
         expect(store.categories()).toEqual(EMPTY_ARRAY);
         expect(store.keyParentPath()).toEqual(EMPTY_ARRAY);
-        expect(store.state()).toEqual(ComponentStatus.IDLE);
+        expect(store.state()).toEqual(ComponentStatus.INIT);
         expect(store.selected()).toEqual(EMPTY_ARRAY);
         expect(store.mode()).toEqual('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
@@ -50,7 +50,7 @@ export const initialState: CategoryFieldState = {
     selected: [],
     categories: [],
     keyParentPath: [],
-    state: ComponentStatus.IDLE,
+    state: ComponentStatus.INIT,
     mode: 'list',
     filter: '',
     searchCategories: []
@@ -101,7 +101,7 @@ export const CategoryFieldStore = signalStore(
         /**
          * Determines if the store state is currently loaded.
          */
-        isListLoaded: computed(() => store.state() === ComponentStatus.LOADED),
+        isInitSate: computed(() => store.state() === ComponentStatus.INIT),
         /**
          * Determines if the search mode is currently loading.
          */