⚡️ keep scroll position on ownerInsights tab change

components/collection/activity/OwnerInsights.vue

@@ -4,17 +4,17 @@
       <div
         class="mr-4 is-clickable"
         :class="{ 'has-text-weight-bold': activeTab === Tabs.holders }"
-        @click="activeTab = Tabs.holders">
+        @click="changeTab(Tabs.holders)">
         {{ $t('holders') }}
       </div>
       <div
         class="is-clickable"
         :class="{ 'has-text-weight-bold': activeTab === Tabs.flippers }"
-        @click="activeTab = Tabs.flippers">
+        @click="changeTab(Tabs.flippers)">
         {{ $t('flippers') }}
       </div>
     </div>
-    <div class="py-4 limit-height is-scrollable">
+    <div ref="container" class="py-4 limit-height is-scrollable">
       <HoldersTab v-if="activeTab === Tabs.holders" :owners="owners" />
       <FlippersTab v-if="activeTab === Tabs.flippers" :flippers="flippers" />
     </div>
@@ -36,6 +36,26 @@ defineProps<{
   flippers?: Flippers
 }>()
 const activeTab = ref(Tabs.holders)
+const container = ref<HTMLDivElement | null>(null)
+
+const scrollPositions = {
+  [Tabs.holders]: 0,
+  [Tabs.flippers]: 0,
+}
+
+const changeTab = (tab: Tabs) => {
+  // Store the current scroll position
+  if (container.value) {
+    scrollPositions[activeTab.value] = container.value.scrollTop
+  }
+  // Set the new active tab and restore the previous scroll position
+  // this is done in order to optimize performance and prevent unnecessary loading
+  // since HolderTab and FlippersTab are lazy loaded
+  activeTab.value = tab
+  if (container.value) {
+    container.value.scrollTop = scrollPositions[tab]
+  }
+}
 </script>
 
 <style lang="scss" scoped>

components/collection/activity/ownerInsightsTabs/FlipperTab.vue

@@ -79,6 +79,13 @@ import { format } from '@/components/collection/activity/utils'
 import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 import { Flippers } from '@/composables/collectionActivity/types'
+const props = defineProps<{
+  flippers?: Flippers
+}>()
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
+
+const flippers = computed(() => Object.entries(props.flippers || {}))
 
 const toggleNFTDetails = (flipperId: string) => {
   const isOpen = isNFTDetailsOpen.value[flipperId]
@@ -87,10 +94,6 @@ const toggleNFTDetails = (flipperId: string) => {
     [flipperId]: !isOpen,
   }
 }
-const target = ref<HTMLElement | null>(null)
-const offset = ref(4)
-
-const flippers = computed(() => Object.entries(props.flippers || {}))
 
 useIntersectionObserver(target, ([{ isIntersecting }]) => {
   if (isIntersecting) {
@@ -109,10 +112,6 @@ const isFlipperMoreNFTSectionOpen = flippers.value.reduce(
   {}
 )
 const isNFTDetailsOpen = ref(isFlipperMoreNFTSectionOpen)
-
-const props = defineProps<{
-  flippers?: Flippers
-}>()
 </script>
 
 <style lang="scss" scoped>