Fix puzzles and labs lists being momentarily outdated when navigating…

… to a new list (#138)

## Summary
Previously, we avoided triggering the loading screen when loading
puzzles or labs to account for the fact "load more" and filters shouldnt
reload the page. However, a) we still want the loading screen on first
load and b) because of the way we cache list responses internally, if
you navigated to a different page with the same type of list on it, it
would show the content of the previously loaded page until the new
content was loaded.

## Testing
* Tested switching from quest to puzzle list
* Tested changing filters and load more on puzzles and lab list

src/components/BasePuzzleListPage.vue

@@ -75,6 +75,7 @@ import PuzzleCard from '../components/PuzzleCard.vue'
 import { Action, Achievement, PuzzleItem, PuzzleList } from '../store';
 import ChatManager from '../ChatManager';
 
+const PAGE_SIZE = 9;
 
 export default Vue.extend({
     props: {
@@ -91,10 +92,11 @@ export default Vue.extend({
     data() {
         return {
             availableFilters: [] as {value: string; text: string}[],
-            numberOfPuzzles: 9,
+            numberOfPuzzles: PAGE_SIZE,
             playablePuzzleIndex: 0,
             chat: <ChatManager | null>null,
             logoSourcePng: require('../assets/logo_eterna.svg'),
+            firstLoad: true
         };
     },
     async mounted() {
@@ -211,11 +213,12 @@ export default Vue.extend({
 
                 if (!query.progression) queryParams.append('size', this.numberOfPuzzles.toString(10));
 
-                await this.$store.dispatch(Action.GET_PUZZLES, queryParams.toString());
+                await this.$store.dispatch(Action.GET_PUZZLES, {queryString: queryParams.toString(), firstLoad: this.firstLoad});
+                this.firstLoad = false;
             }
         },
         async fetchMorePuzzles() {
-            this.numberOfPuzzles += 9;
+            this.numberOfPuzzles += PAGE_SIZE;
             await this.fetchNewPuzzles();
         },
         async logout() {

src/store/index.ts

@@ -384,15 +384,15 @@ export default function createStore(http: AxiosInstance) {
                     commit('popIsLoading');
                 }
             },
-            async [Action.GET_LABS]({ commit }, queryString: string){
-                // commit('pushIsLoading');
+            async [Action.GET_LABS]({ commit }, { queryString, firstLoad }: { queryString: string; firstLoad?: boolean}){
+                if (firstLoad) commit('pushIsLoading');
                 try{
                     const { data } = (await http.get(`/get/?${queryString}`)).data;
                     commit('setLabTotal', parseInt(data.num_labs));
                     commit('setLabs', data.labs);
                 }
                 finally{
-                    // commit('popIsLoading');
+                    if (firstLoad) commit('popIsLoading');
                 }
             },
             async [Action.GET_LAB]({ commit }, { id }: { id: string}){
@@ -431,14 +431,14 @@ export default function createStore(http: AxiosInstance) {
                     commit('popIsLoading');
                 }
             },
-            async [Action.GET_PUZZLES]({ commit }, queryString: string){
-                // commit('pushIsLoading');
+            async [Action.GET_PUZZLES]({ commit }, { queryString, firstLoad }: { queryString: string; firstLoad?: boolean}){
+                if (firstLoad) commit('pushIsLoading');
                 try{
                     const { data } = (await http.get(`/get/?${queryString}`)).data;
                     commit('setPuzzles', data);
                 }
                 finally{
-                    // commit('popIsLoading');
+                    if (firstLoad) commit('popIsLoading');
                 }
             },
             async [Action.GET_PUZZLE]({ commit }, { id }: { id: string}){

src/views/LabExplore.vue

@@ -58,18 +58,21 @@ import { Action, Achievement, LabData } from '../store';
 import ChatManager from '../ChatManager';
 import DefaultLabHero from '../assets/slides/hero-lab-default.png';
 
+const PAGE_SIZE = 9;
+
 export default Vue.extend({
     data() {
         return {
             availableFilters: [
                 { value: 'active', text: 'Active' },
                 { value: 'inactive', text: 'Inactive' }
             ],
-            numberOfLabs: 9,
+            numberOfLabs: PAGE_SIZE,
             playablePuzzleIndex: 0,
             chat: <ChatManager | null>null,
             logoSourcePng: require('../assets/logo_eterna.svg'),
-            defaultLabImage: DefaultLabHero
+            defaultLabImage: DefaultLabHero,
+            firstLoad: true
         };
     },
     async mounted() {
@@ -114,10 +117,11 @@ export default Vue.extend({
             let labFilter = requestString;
             if (filters.includes("active") && !filters.includes("inactive")) {labFilter = `${requestString}&filters=active`}
             if (filters.includes("inactive") && !filters.includes("active")) {labFilter = `${requestString}&filters=inactive`}
-            await this.$store.dispatch(Action.GET_LABS, labFilter);
+            await this.$store.dispatch(Action.GET_LABS, {queryString: labFilter, firstLoad: this.firstLoad});
+            this.firstLoad = false;
         },
         async fetchMoreLabs() {
-            this.numberOfLabs += 9;
+            this.numberOfLabs += PAGE_SIZE;
             await this.fetchNewLabs();
         },
         async logout() {