implements lazy loading for glyphs - AP-101

components/tailored/marketplace/glyphs/Glyphs.vue

@@ -2,7 +2,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-// @ts-nocheck
 import { mapState } from 'vuex'
 import { ChevronLeftIcon } from 'satellite-lucide-icons'
 import { marketGlyphs } from '~/mock/marketplace'

components/tailored/messaging/enhancers/glyphs/Glyphs.html

@@ -8,16 +8,31 @@
       type="primary"
     />
   </div>
-  <TailoredMessagingEnhancersGlyphsNav @navSelected="(val) => {filter(val)}"></TailoredMessagingEnhancersGlyphsNav>
+
+  <TailoredMessagingEnhancersGlyphsNav
+    @navSelected="(val) => {filter(val)}"
+  ></TailoredMessagingEnhancersGlyphsNav>
   <div class="glyph-content hidden-scroll">
     <UiScroll verticalScroll scrollbarVisibility="scroll" class="glyph-content">
       <TailoredMessagingEnhancersGlyphsMostUsed></TailoredMessagingEnhancersGlyphsMostUsed>
-      <TailoredMessagingEnhancersGlyphsPack
-        v-for="pack in filteredGlyphs"
-        :key="pack.id"
-        :pack="pack"
-      ></TailoredMessagingEnhancersGlyphsPack>
+
+      <div v-for="(pack, i) in filteredGlyphs">
+        <v-responsive max-height="100%">
+          <v-lazy
+            v-model="pack.isActive"
+            :options="{
+              threshold: .5 
+            }"
+            min-height="50"
+            transition="fade-transition"
+          >
+            <TailoredMessagingEnhancersGlyphsPack :key="pack.id" :pack="pack">
+            </TailoredMessagingEnhancersGlyphsPack>
+          </v-lazy>
+        </v-responsive>
+      </div>
     </UiScroll>
   </div>
+
   <TailoredMessagingEnhancersGlyphsItemInfo></TailoredMessagingEnhancersGlyphsItemInfo>
 </div>

nuxt.config.js

@@ -75,6 +75,7 @@ export default defineNuxtConfig({
     { src: '~/plugins/thirdparty/multiselect.ts' },
     { src: '~/plugins/thirdparty/v-calendar.ts' },
     { src: '~/plugins/thirdparty/videoplayer.ts' },
+    { src: '~/plugins/thirdparty/vuetify.ts' },
     // Local
     { src: '~/plugins/local/classLoader.ts' },
     { src: '~/plugins/local/notifications.ts', mode: 'client' },

package.json

@@ -101,6 +101,7 @@
     "@nuxt/bridge": "npm:@nuxt/[email protected]",
     "@nuxt/types": "^2.15.3",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/vuetify": "^1.12.1",
     "@types/ed2curve": "^0.2.2",
     "@types/elliptic": "^6.4.13",
     "@types/jest": "^27.0.3",

plugins/thirdparty/vuetify.ts

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+Vue.use(Vuetify)
+
+export default new Vuetify