fix(virtual-scroll): fix flicker on data change

[anagstef]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Currently, if you have an ion-virtual-scroll with a list of items and a search bar for filtering them, when you change the list of items, the items disappear until rendered again, causing a flicker. This could be solved for the items using the itemHeight function to provide the exact height size and bypass some calculations and be more performant etc.

However, if you had a header or footer, they would still flicker. This PR adds two more optional functions named headerHeight and footerHeight that return the exact size of the header and footer respectively and resolve the flicker.

Issue Number: #17540

What is the new behavior?

If you provide headerHeight and/or footerHeight functions as ion-virtual-scroll attributes, with exact height values, the flicker on data change stops.

Does this introduce a breaking change?

• Yes
• No

Other information

This is the current behavior:

This is the new behavior:

[manucorporat]

love it! cc @brandyscarney