refactor: minor performance improvements on teams related operations

packages/hoppscotch-common/src/components/workspace/Current.vue

@@ -16,9 +16,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue"
-import { useReadonlyStream } from "~/composables/stream"
-import { workspaceStatus$ } from "~/newstore/workspace"
 import { useI18n } from "~/composables/i18n"
+import { useService } from "dioc/vue"
+import { WorkspaceService } from "~/services/workspace.service"
 
 defineProps<{
   section?: string
@@ -26,7 +26,8 @@ defineProps<{
 
 const t = useI18n()
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspaceService = useService(WorkspaceService)
+const workspace = workspaceService.currentWorkspace
 
 const teamWorkspaceName = computed(() => {
   if (workspace.value.type === "team" && workspace.value.teamName) {

packages/hoppscotch-common/src/components/workspace/Selector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="rootEl">
     <div class="flex flex-col">
       <div class="flex flex-col">
         <HoppSmartItem
@@ -69,20 +69,20 @@
 </template>
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
-import { onLoggedIn } from "~/composables/auth"
 import { useReadonlyStream } from "~/composables/stream"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import IconUser from "~icons/lucide/user"
 import IconUsers from "~icons/lucide/users"
 import IconPlus from "~icons/lucide/plus"
 import { useColorMode } from "@composables/theming"
-import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import IconDone from "~icons/lucide/check"
 import { useLocalState } from "~/newstore/localstate"
 import { defineActionHandler } from "~/helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
+import { useElementVisibility, useIntervalFn } from "@vueuse/core"
 
 const t = useI18n()
 const colorMode = useColorMode()
@@ -94,13 +94,37 @@ const currentUser = useReadonlyStream(
   platform.auth.getProbableUser()
 )
 
-const teamListadapter = new TeamListAdapter(true)
+const workspaceService = useService(WorkspaceService)
+const teamListadapter = workspaceService.acquireTeamListAdapter(null)
 const myTeams = useReadonlyStream(teamListadapter.teamList$, [])
 const isTeamListLoading = useReadonlyStream(teamListadapter.loading$, false)
 const teamListAdapterError = useReadonlyStream(teamListadapter.error$, null)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 const teamListFetched = ref(false)
 
+const rootEl = ref<HTMLElement>()
+const elVisible = useElementVisibility(rootEl)
+
+const { pause: pauseListPoll, resume: resumeListPoll } = useIntervalFn(() => {
+  if (teamListadapter.isInitialized) {
+    teamListadapter.fetchList()
+  }
+}, 10000)
+
+watch(
+  elVisible,
+  () => {
+    if (elVisible.value) {
+      teamListadapter.fetchList()
+
+      resumeListPoll()
+    } else {
+      pauseListPoll()
+    }
+  },
+  { immediate: true }
+)
+
 watch(myTeams, (teams) => {
   if (teams && !teamListFetched.value) {
     teamListFetched.value = true
@@ -115,7 +139,7 @@ const loading = computed(
   () => isTeamListLoading.value && myTeams.value.length === 0
 )
 
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+const workspace = workspaceService.currentWorkspace
 
 const isActiveWorkspace = computed(() => (id: string) => {
   if (workspace.value.type === "personal") return false
@@ -124,7 +148,7 @@ const isActiveWorkspace = computed(() => (id: string) => {
 
 const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
   REMEMBERED_TEAM_ID.value = team.id
-  changeWorkspace({
+  workspaceService.changeWorkspace({
     teamID: team.id,
     teamName: team.name,
     type: "team",
@@ -133,15 +157,11 @@ const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
 
 const switchToPersonalWorkspace = () => {
   REMEMBERED_TEAM_ID.value = undefined
-  changeWorkspace({
+  workspaceService.changeWorkspace({
     type: "personal",
   })
 }
 
-onLoggedIn(() => {
-  teamListadapter.initialize()
-})
-
 watch(
   () => currentUser.value,
   (user) => {