Fix Brand Recommendations animation on second time appearance #1267
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
annacv
commented
Aug 28, 2023
packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
Outdated
Show resolved
Hide resolved
|
Hi @herrardo & @CachedaCodes here is another approach that makes more sense. Updated PR description 👀 . Let me know what you think, please. |
CachedaCodes
suggested changes
Sep 5, 2023
packages/x-components/src/x-modules/queries-preview/store/module.ts
Outdated
Show resolved
Hide resolved
packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
Outdated
Show resolved
Hide resolved
… event, so we need all single queries to be deleted EMP-1707
CachedaCodes
suggested changes
Sep 11, 2023
Comment on lines
20
to
23
| /** | ||
| * The component that shows a Query preview has been destroyed. | ||
| */ | ||
| QueriesPreviewDestroyedHook: void; |
| @@ -49,6 +47,7 @@ | |||
| import { createOrigin } from '../../../utils/origin'; | |||
| import { debounce } from '../../../utils/debounce'; | |||
| import { DebouncedFunction } from '../../../utils'; | |||
| import { LIST_ITEMS_KEY, XProvide } from '../../../components'; | |||
There was a problem hiding this comment.
restore this imports as they were before
CachedaCodes
approved these changes
Sep 12, 2023
CachedaCodes
deleted the
bugfix/EMP-1707-Brand-recommendations-wrong-reload
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
EMP-1707
Pull request template
Remove all the
QueriesPreviewfrom the state when the component is destroyed. This way, we prevent re-rendering effects when we go back to a pre-search scenario after selecting & removing a query from the search box.There were other two options available to handle this: using
v-showinstead ofv-if, or preventing sending the requests if there wereQueryPreviewson the state. These options had the con of losing the DOM animation, so I went for this removing queries approach from the state option in order to keep the current component rendering behavior.Motivation and context
When writing a query and then deleting it, the BrandRecommendations/QueryPreview component is displayed again, making like two times the appearance animation.
Type of change
What is the destination branch of this PR?
MainHow has this been tested?
"install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.406.tgz --no-save",