Improve expand/collapse animation in LayersViewer component

[RichieOrito]

Summary

This pull request enhances the user experience in the LayersViewer component by implementing smooth expand/collapse animations. Previously, the expansion and collapse of layers were instantaneous, which could be jarring to users. With the introduction of a smooth transition, users can now visually track the changes more comfortably

Motivation

The motivation behind this change was to improve the visual feedback provided to the user when interacting with the LayersViewer component. Smooth transitions help in making the interface feel more responsive and intuitive. This improvement was also prompted by feedback from our user commonuty who expressed a need for a more visually engaging experience when navigating through the layers.

Testing

The changes have been tested in a local development environment with various datasets to ensure compatibility and performance. The animations were verified across different browsers(Chrome, Firefox, Safari) to check for consistent behavior. Additionally, the impact on performance was assessed to ensure that the animations do not introduce signification lag or reduce the responsiveness of the application.

Beyond automated testing hooks, manual testing was conducted to simulate real user interactions and gather feedback on the animation timings and visual appeal.

Questions

I'm looking to gather feedback on the following aspects:

• Is the animation speed appropriate, should it be adjusted?

• Are there any additional UI elements within the LayersViewer that could benefir from similar animations ?

• Would it be beneficial to add a user preference setting to disable animations for users who prefer a static interface ?

[RichieOrito]

Hello @birm,

I've submitted a pull request #939 aimed at enhancing the expand/collapse animation within the LayersViewer component. My changes introduce a smoother transition effect.
I've followed the contribution guidelines, but I'd appreciate any feedback or suggestions you have, especially regarding implementation details and it's integration with the existing UI.

Thank you for your time and consideration. I'm eager to contribute further and look forward to your valuable input.

Best regard,
RichieOrito

[birm]

How did you test this? Can you show a screen recording of it working? It only seems to make me entirely unable to use the layers viewer to me.

[RichieOrito]

Hello @birm,

Thank you for reviewing my pull request and for your feedback. I understand the importance of testing and demonstrating the effectiveness of the modifications I've proposed.

Currently, I'm facing some challenges with testing the layers viewer functionality due to an issue while trying to upload and view slides in my local environment. Here's the error I encountered after the upload process:

errno	code	syscall	hostname	statusCode	ID	preview
-3001	EAI_AGAIN	getaddrinfo	ca-load	500	1

This error has prevented me from fully testing the feature and capturing a screen recording of its operation. I suspect it might be related to my local setup or a misunderstanding of the testing procedure for these changes.

Could you provide some guidance on how best to proceed with testing? Additionally, if there are specific steps or configurations I should follow to replicate the testing environment accurately, I would greatly appreciate your advice.

Thank you for your patience and support as I work through these issues. I am eager to ensure that my contributions enhance the caMicroscope project effectively.