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 commit adds two more optional functions named headerHeight and footerHeight that return the exact size of the header and footer respectively and resolve the flicker.
- use the right index in updateVDom to update the top transition ()
- extend unit test to verify the top is also calculated right with a given headerFn and footerFn
- update the visibility of the node also if a given approxHeaderHeight/approxFooterHeight matches the calculated height
fixes#15948fixes#17298
- In the **`loading`** component, fallback to `spinner` icon config before platform default.
- In both **`refresher`** & **`infinite-scroll`** components, use platform default as final fallback.
- In **`infinite-scroll`** test templates, and the _basic_ **`virtual-scroll`** test template, fix loading _spinner_ and _text_ attributes.
fixes#17659
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates
Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
