added flat map for direct item access, however they are copies and

it doesn't seem to be working be updated for the v-show; also tried changing the visibility attribute, works, but still doesn't prevent any of the remaining renderings to happen. No real performance increase... virtual-scroller is needed.

src/components/TreeView.vue

@@ -29,12 +29,14 @@
 
     <template v-slot:label="{ item, active }">
 
-      <v-row no-gutters
+      <v-row v-intersect="onIntersect"
+              no-gutters
               align="center"
-              style="cursor: pointer; " >
+              :id="item.key"
+              :ref="item.key" >
 
         <v-col class="pl-2 pr-4"
-              :class="item.isFile ? '' : 'shrink'">
+                :class="item.isFile ? '' : 'shrink'">
           {{ item.name }}
         </v-col>
 
@@ -90,6 +92,7 @@
         </v-col>
 
       </v-row>
+
     </template>
 
   </v-treeview>
@@ -126,6 +129,7 @@ export default {
     ...mapState([
       'content',
       'contentLoading',
+      'contentMapFlat',
     ]),
   },
   methods: {
@@ -162,6 +166,22 @@ export default {
 
       item.open = true;
     },
+    // eslint-disable-next-line no-unused-vars
+    onIntersect(entries, observer) {
+      // More information about these options
+      // is located here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
+      const observerdEntry = entries[0];
+      const key = observerdEntry?.target?.id;
+
+      const flatMapValue = this.$refs[key]; // this.contentMapFlat[key];
+      if (flatMapValue) {
+        flatMapValue.setAttribute('visibility', observerdEntry.isIntersecting ? 'inherit' : 'hidden');
+        // flatMapValue.isIntersecting = observerdEntry.isIntersecting;
+        // console.log(`${key} isIntersecting ${observerdEntry.isIntersecting}`);
+        // this.$forceUpdate();
+      }
+    },    
   },
   watch: {
     allCollapsed() {

src/store/mutations.js

@@ -27,6 +27,7 @@ import {
   getPrefixMap,
   mergeS3Maps,
   sanitaizePrefix,
+  flattenContentMap,
 } from './s3Factory';
 
 export default {
@@ -85,8 +86,12 @@ export default {
       map = mergeS3Maps(state.contentMap, map, parentPrefix);
     }
 
-    state.contentLoading = false;
     this._vm.$set(state, 'contentMap', map);
+
+    const flatMap = flattenContentMap(map);
+    this._vm.$set(state, 'contentMapFlat', flatMap);
+
+    state.contentLoading = false;
   },
   [GET_S3_CONTENT_ERROR](state, reason) {
     state.contentLoading = false;

src/store/s3Factory.js

@@ -49,6 +49,7 @@ function createDirectoryEntry(keyInfos, baseUrl, delimiter, childs = null) {
     children,
     childs: childrenLength,
     fileExt: '',
+    key: directoryName,
   };
 }
 
@@ -116,6 +117,7 @@ export function extractKeyInfos(key, delimiter = '/') {
     name: fileKey,
     isFile,
     fileExt,
+    key,
   };
 }
 
@@ -378,3 +380,24 @@ export function sanitaizePrefix(prefix, delimiter = '/') {
 
   return sainPrefix;
 }
+
+function getFlatEntries(entries) {
+  let flat = {};
+
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    flat[entry.key] = entry;
+
+    if (entry.children?.length > 0) {
+      const flatChildren = getFlatEntries(entry.children);
+      flat = { ...flat, ...flatChildren };
+    }
+  }
+
+  return flat;
+}
+
+export function flattenContentMap(contentMap) {
+  const contentValues = Object.values(contentMap);
+  return getFlatEntries(contentValues);
+}

src/store/store.js

@@ -24,6 +24,7 @@ export default new Vuex.Store({
     aboutError: null,
     content: null,
     contentMap: null,
+    contentMapFlat: null,
     contentLoading: false,
     contentError: null,
     imagesPng,