EDIT: On further investigation, there doesn't seem to be much lag after the page has been given some time to load, so maybe this is more of an issue of waiting on some background API calls to complete (e.g. /allBuildings), than any kind of Vue State / image rendering issue.
Probably fine to leave this bug as not too consequential for now.
There seems to be a scrolling "max speed" before the animation starts to have hiccups; scrolling slowly does not trigger any animation stutters.
Oddly, the scrolling had no lag on mobile (iPhone, safari). Maybe because on mobile only one column is rendered.
Didn't have time to diagnose the issue but I suspect it has something to do with image rendering (maybe make the thumbnails smaller or remove them), the Vue State logic in building_list component (maybe there is a state variable that can be optimized?), or maybe we can just reduce the number of columns shown on desktop as well.
Another possibility is paginating the data on the frontend (only show a certain number of buildings per page), but let's make sure the user can still search the whole building list (when typing into the search bar) if we go that route.
EDIT: On further investigation, there doesn't seem to be much lag after the page has been given some time to load, so maybe this is more of an issue of waiting on some background API calls to complete (e.g.
/allBuildings), than any kind of Vue State / image rendering issue.Probably fine to leave this bug as not too consequential for now.
===
There's a noticeable lag for me scrolling through the building list (https://dashboard.sustainability.oregonstate.edu/#/buildings), at least on PC on chrome browser.
There seems to be a scrolling "max speed" before the animation starts to have hiccups; scrolling slowly does not trigger any animation stutters.
Oddly, the scrolling had no lag on mobile (iPhone, safari). Maybe because on mobile only one column is rendered.
Didn't have time to diagnose the issue but I suspect it has something to do with image rendering (maybe make the thumbnails smaller or remove them), the Vue State logic in building_list component (maybe there is a state variable that can be optimized?), or maybe we can just reduce the number of columns shown on desktop as well.
Some ideas here for Vue State optimizations: https://stackoverflow.com/questions/43913454/vue-v-for-performance-is-poor
Another possibility is paginating the data on the frontend (only show a certain number of buildings per page), but let's make sure the user can still search the whole building list (when typing into the search bar) if we go that route.