From dd3b51d0b7698793bcb021e916db45d51a166932 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 11 May 2021 23:39:23 -0400
Subject: [PATCH] Use Intersection component to fetch team list on visibility

---
 components/collections/ChooseType.vue | 36 ++++++++++++++++-----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index a726703b..89222ca2 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -6,20 +6,22 @@
         <ul>
           <li>
             <span class="select-wrapper">
-              <select
-                type="text"
-                id="team"
-                class="team"
-                autofocus
-                @change="updateSelectedTeam(myTeams[$event.target.value])"
-              >
-                <option :key="undefined" :value="undefined" hidden disabled selected>
-                  Select team
-                </option>
-                <option v-for="(team, index) in myTeams" :key="index" :value="index">
-                  {{ team.name }}
-                </option>
-              </select>
+              <SmartIntersection @intersecting="onTeamSelectIntersect">
+                <select
+                  type="text"
+                  id="team"
+                  class="team"
+                  autofocus
+                  @change="updateSelectedTeam(myTeams[$event.target.value])"
+                >
+                  <option :key="undefined" :value="undefined" hidden disabled selected>
+                    Select team
+                  </option>
+                  <option v-for="(team, index) in myTeams" :key="index" :value="index">
+                    {{ team.name }}
+                  </option>
+                </select>
+              </SmartIntersection>
             </span>
           </li>
         </ul>
@@ -46,10 +48,14 @@ export default {
           }
         }
       `,
-      pollInterval: 5000,
+      pollInterval: 10000,
     },
   },
   methods: {
+    onTeamSelectIntersect() {
+      // Load team data as soon as intersection
+      this.$apollo.queries.myTeams.refetch()
+    },
     updateCollectionsType(tabID) {
       this.$emit("update-collection-type", tabID)
     },