Add patient details button is jumping when we open advanced patient filters

[rithviknishad]

Describe the bug
In the patients' list page, the add patient details button is jumping when we open Advanced Filters.

To Reproduce
Steps to reproduce the behavior:

1. Go to patients list page
2. Open advanced filters

Expected behavior
It shouldn't jump.

Screenshots

output.mp4

[khavinshankar]

@rithviknishad
The jumping around seems to be caused because of the useExport hook. We are exporting ExportMenu and ExportButton JSX components from the useExport hook, so as the useExport hook is called at every render, these also are changing (function signatures) and rerendered. The jumping is because of the difference in time taken to render the icons used inside the 2 above-mentioned functions.

I think converting the hook to a component should fix it, what are ur thoughts?

[rithviknishad]

@khavinshankar I understood the problem. I should make sure I stop inlining components 😅

Btw, do you mean to refactor out the ExportMenu, ExportButton, and _CSVLink outside of the hook?

Or to create two components ExportMenu, and ExportButton that replicates the functionality of the useExport hook inside it?

[khavinshankar]

@rithviknishad something of that sort

[rithviknishad]

@khavinshankar I think it should work, but I wonder how it also affects the add patient details button too?

[naman114]

The buttons seem to be jumping on several screens when the sidebar is opened

2022-12-19_23-50-57.mp4

@gigincg @khavinshankar @rithviknishad