Marketplace App Card - Favorite Button

jjeroch commented 5 months ago

Summary

The current implementation of the favorite button is causing a problem. When a user clicks on the app's favorite button, the button icon does not change immediately. Instead, the change is only visible after reloading the page. The same issue occurs when trying to un-favorite an app.

Expected Behavior:

When a user clicks on the favorite button, the button icon should change instantly to indicate successful favoritization. Similarly, when un-favoriting an app, the button icon should update immediately.

Steps to Reproduce:

Open the app.
Navigate to the marketplace - any app card
Click on the favorite button.
Observe that the button icon does not change immediately.
Reload the page.
Notice that the button icon now reflects the successful favoritization.

Additional Information:

This issue affects both favoriting and un-favoriting an app.
The problem occurs consistently and is reproducible.
The expected behavior is for the button icon to update instantly upon clicking, without the need for page reloading.

Test

[ ] The button should switch and change immediately upon selection.
[ ] The favorite section should be updated promptly when any favorite button of an app is selected.
[ ] The favorite function should only be triggered when the user clicks on the exact favorite button and not anywhere else.
[ ] Clicking the favorite button should not cause the card to reload.

oyo commented 4 months ago

To change this behavior and keep a satisfying user experience I recommend to change the hovering behavior of the card component slightly. Because currently the favorite button is in the expanded area of the card only visible when hovering over the card. If the user clicks the button the card is re-rendered and losing the expanded status. We could extend the hovering area to the whitespace under the card to prevent this.

jjeroch commented 4 months ago

To change this behavior and keep a satisfying user experience I recommend to change the hovering behavior of the card component slightly. Because currently the favorite button is in the expanded area of the card only visible when hovering over the card. If the user clicks the button the card is re-rendered and losing the expanded status. We could extend the hovering area to the whitespace under the card to prevent this.

@manojava-gk in case this is approached; please reach out to Dirk first

manojava-gk commented 4 months ago

To change this behavior and keep a satisfying user experience I recommend to change the hovering behavior of the card component slightly. Because currently the favorite button is in the expanded area of the card only visible when hovering over the card. If the user clicks the button the card is re-rendered and losing the expanded status. We could extend the hovering area to the whitespace under the card to prevent this.

@manojava-gk in case this is approached; please reach out to Dirk first

No. but will talk to Dirk about this input.

jjeroch commented 3 months ago

Decided to re-design the app card (new hover state can get found below)

manojava-gk commented 3 months ago

Reduced space by 30% Description is supported and not bold

eclipse-tractusx / portal-frontend