I have an eCommerce site where there are product cards displayed in a grid. I am using react-semantic-ui grids and cards. Even when there are few cards, ex: 5-6 If I scroll too fast the screen flickers and slows down. The components disappear and when I stop scrolling they reappear but there's a visible lag. This is even more apparent on mobiles.
The page in question is here
I tried react-window and react-virtualized they don't seem to do much and overcomplicates the whole thing. What can I do to solve this?
Related
I am facing a issue while trying to update scroll fast in my application. Screen became blank while scrolling fast.
I have added video link.Issue Video
I was trying to make smooth render on contact list but adding 50 per conacts scroll blank space was coming.
Here is the link of the website https://ecom-website-f483.vercel.app/ after website homepage is completely loaded and then if you scroll little faster you will start seeing blank screen and after few milliseconds component appears again.
I have a FlastList that scrolls horizontally and it works smooth. But when I add one more horizontal scrolling FlatList below this one the whole scrolling starts lagging. Any solution to this?
I'm using the wonderful react-swipe component which is working perfectly for single-panel swiping (i.e. mobile). However, on tablet / desktop I would need to display 3 panels at once, with the center tablet 'active'.
Can I get some tips on how to adjust the styling for this component and it's children to achieve this? See attached image.
I'm building webapp focused on mobile. I want to have some navigation/action items displayed on topbar, but current logic of Foundation is hiding everything into sliding menu when on small screen. It is just annoying if my topbar items are hidden, when there is 500px of space on my tablet.
Please help, how reveal items on small screen when there is enough space to show them? Twitter Bootstrap have this functionality, it is easy as "not to nest items to div.nav-collapse".
I'm using Foundation 4.2.1, CSS only, no JS.