Solved loading spinner issue where the spinner stops before data fetch is completed
Kudos to @keenen for this lightning tutorial! β‘οΈ
I was trying to create a loading spinner while the comments tab of the /community page fetches data (currently taking 5s due to massive data size! Will have to think abt optimization later), and I want the spinner to keep going till the data fetch is complete and rendered on page. How does one go abt tracking when the data fetching is finished, and to stop showing the spinner and show the data (on Vue/Nuxt)?
I tried defining an `isLoading: false` data attribute and then toggling it to true at the end of my function, but it didn't work. (Not sure why, could be because isLoading is shared in other functions which gets called. But changing to unique data objects like `commentsIsLoading` didn't work either)
As advised by Keenen, used `v-if="mostComments.length == 0"` in the end for the spinner template. Better to track the data object in question directly than defining a different one to toggle the spinner!
Added the spinner to 3 tabs - Most Goals, Most Comments, Most Posts
Side-note: `mostComments == null` doesn't work because I initialized it as an empty string in the beginning. Alternatively I can use using empty string in a pair of single quotes instead of null, like `v-if="mostComments = ''`
Ref:
Awesome loading spinners from https://tobiasahlin.com/spinkit/
I was trying to create a loading spinner while the comments tab of the /community page fetches data (currently taking 5s due to massive data size! Will have to think abt optimization later), and I want the spinner to keep going till the data fetch is complete and rendered on page. How does one go abt tracking when the data fetching is finished, and to stop showing the spinner and show the data (on Vue/Nuxt)?
I tried defining an `isLoading: false` data attribute and then toggling it to true at the end of my function, but it didn't work. (Not sure why, could be because isLoading is shared in other functions which gets called. But changing to unique data objects like `commentsIsLoading` didn't work either)
As advised by Keenen, used `v-if="mostComments.length == 0"` in the end for the spinner template. Better to track the data object in question directly than defining a different one to toggle the spinner!
Added the spinner to 3 tabs - Most Goals, Most Comments, Most Posts
Side-note: `mostComments == null` doesn't work because I initialized it as an empty string in the beginning. Alternatively I can use using empty string in a pair of single quotes instead of null, like `v-if="mostComments = ''`
Ref:
Awesome loading spinners from https://tobiasahlin.com/spinkit/
