Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Aug 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b735bf
remove blinking effect during category loading
hmoreras Aug 14, 2024
b6fda51
avoid initial state to load the empty state, that is causing a FF ani…
hmoreras Aug 14, 2024
a9b2a79
test updates
hmoreras Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,6 @@
</div>
}
</div>
} @else {
} @else if (!$isInitialState) {
<dot-empty-container [configuration]="$emptyState()" [hideContactUsLink]="true" />
}
5 changes: 5 additions & 0 deletions ...components/dot-category-field-category-list/dot-category-field-category-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
19 changes: 9 additions & 10 deletions ...ory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion ...src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
4 changes: 2 additions & 2 deletions ...tent/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const initialState: CategoryFieldState = {
selected: [],
categories: [],
keyParentPath: [],
state: ComponentStatus.IDLE,
state: ComponentStatus.INIT,
mode: 'list',
filter: '',
searchCategories: []
Expand Down Expand Up @@ -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.
*/
Expand Down
Loading