PATCH: feat: lazy load topic card when they appear in viewport (#45)

bimdata · Dec 16, 2024 · 02061f9 · 02061f9
1 parent 5e78146
commit 02061f9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/src/components/bcf-topic-card/BcfTopicCard.scss b/src/components/bcf-topic-card/BcfTopicCard.scss
@@ -1,15 +1,24 @@
+.bcf-topic-card,
+.bcf-topic-card-placeholder {
+  --card-width: 336px;
+  --card-height: 308px;
+  --card-header-height: 32px;
+  --card-image-height: 171px;
+  --card-content-height: 105px;
+}
+
 .bcf-topic-card {
   position: relative;
-  width: 336px;
-  height: 308px;
+  width: var(--card-width);
+  height: var(--card-height);
   box-shadow: var(--box-shadow);
 
   &.selected{
     outline: 3px solid var(--color-primary);
   }
 
   &__header {
-    height: 32px;
+    height: var(--card-header-height);
     padding-right: var(--spacing-unit);
     background-color: var(--color-white);
     display: flex;
@@ -48,7 +57,7 @@
   }
 
   &__image {
-    height: 171px;
+    height: var(--card-image-height);
     position: relative;
     display: flex;
     justify-content: center;
@@ -86,11 +95,18 @@
   }
 
   &__content {
-    height: 105px;
+    height: var(--card-content-height);
     padding: var(--spacing-unit);
     border-top: 3px solid var(--color-silver-light);
     font-size: 12px;
     background-color: var(--color-white);
     color: var(--color-text);
   }
 }
+
+.bcf-topic-card-placeholder {
+  width: var(--card-width);
+  height: var(--card-height);
+  box-shadow: var(--box-shadow);
+  background-color: var(--color-silver-light);
+}
diff --git a/src/components/bcf-topic-card/BcfTopicCard.vue b/src/components/bcf-topic-card/BcfTopicCard.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="visible"
     class="bcf-topic-card"
     :class="{ selected }"
     @mouseover="hover = true"
@@ -78,11 +79,13 @@
       </div>
     </div>
   </div>
+
+  <div v-else ref="placeholder" class="bcf-topic-card-placeholder"></div>
 </template>
 
 <script>
 import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
 // Components
 import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
@@ -111,6 +114,8 @@ export default {
   },
   emits: ["open-topic", "update:selected"],
   setup(props) {
+    const visible = ref(false);
+    const placeholder = ref(null);
     const hover = ref(false);
 
     const priorityColor = computed(() => getPriorityColor(props.topic, props.detailedExtensions));
@@ -123,13 +128,30 @@ export default {
 
     const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
 
+    onMounted(() => {
+      const observer = new IntersectionObserver(
+        ([{ isIntersecting }]) => {
+          if (!isIntersecting) return;
+          visible.value = true;
+          observer.disconnect();
+        },
+        {
+          rootMargin: `${placeholder.value.clientHeight}px`
+        }
+      );
+
+      observer.observe(placeholder.value);
+    });
+
     return {
       // References
       hover,
+      placeholder,
       priorityColor,
       statusColor,
       topicImage,
       topicObjects,
+      visible,
       // Methods
       adjustTextColor,
     };