Upgraded Node Version & Package Updates
This PR updates the used Node.js version from 18 to 20 which provides better performance and new features. Our package versions have also been updated to ensure compatibility with this newer Node version, as well as new features and bug fixes in these packages.
Changes in App Initialization
In App.vue, we no longer initialize the app with an array of results. Instead, we added a more efficient method, FetchAllData, which sync ups certain data during the initialization.
Property and Method Updates in data structure
The property dataLoaded has been renamed as fetchingData in the types.ts and index.ts files under src/common and src/store folders, making the purpose of the property clearer. This shows whether data is currently being fetched. A new property dataFetched informs us if the data fetch has already completed. We have also added a new isReady method and FetchAllData method in the store, controlling when and what data is fetched during initialization.
Updating Component Initialization flow
In various components (Approve.vue, Leaderboard.vue, Play.vue, Player.vue, Round.vue), we have integrated a check for whether the store is ready before executing individual component-level data fetches in their initialization cycle. This should streamline the loading experience and ensure all required data is loaded before the components try to access it.
In summary, this PR is all about optimizing and controlling our app data fetch sequences for a smoother user experience and more efficient data usage.
PR Summary
Upgraded Node Version & Package Updates This PR updates the used Node.js version from 18 to 20 which provides better performance and new features. Our package versions have also been updated to ensure compatibility with this newer Node version, as well as new features and bug fixes in these packages.
Changes in App Initialization In
App.vue
, we no longer initialize the app with an array of results. Instead, we added a more efficient method,FetchAllData
, which sync ups certain data during the initialization.Property and Method Updates in data structure The property
dataLoaded
has been renamed asfetchingData
in thetypes.ts
andindex.ts
files undersrc/common
andsrc/store
folders, making the purpose of the property clearer. This shows whether data is currently being fetched. A new propertydataFetched
informs us if the data fetch has already completed. We have also added a newisReady
method andFetchAllData
method in the store, controlling when and what data is fetched during initialization.Updating Component Initialization flow In various components (
Approve.vue
,Leaderboard.vue
,Play.vue
,Player.vue
,Round.vue
), we have integrated a check for whether the store is ready before executing individual component-level data fetches in their initialization cycle. This should streamline the loading experience and ensure all required data is loaded before the components try to access it.In summary, this PR is all about optimizing and controlling our app data fetch sequences for a smoother user experience and more efficient data usage.