From 535bd8d8400e837837b8bea66d5acdaf73b2a433 Mon Sep 17 00:00:00 2001
From: Elias Ruiz Monserrat <elrumo97@me.com>
Date: Mon, 24 Jan 2022 00:01:28 +0100
Subject: [PATCH] Improved performance on rendering icons

---
 package.json                     |   2 +-
 src/App.vue                      |  10 ++-
 src/components/Home.vue          |  92 +++++++++++-----------
 src/components/ResourcesCard.vue |  10 ++-
 src/components/UserIconCard.vue  | 126 ++++++++++++++++---------------
 src/components/UserIconGrid.vue  |  34 +--------
 src/main.js                      |   4 +
 src/store/store.js               | 113 +++++++++++++++++----------
 src/views/LearningResource.vue   |  11 +--
 src/views/ResourceView.vue       |  12 +--
 10 files changed, 217 insertions(+), 197 deletions(-)

diff --git a/package.json b/package.json
index 3269d82d..057965d9 100644
--- a/package.json
+++ b/package.json
@@ -31,10 +31,10 @@
     "sass": "^1.45.1",
     "simple-git": "^2.47.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "v-lazy-image": "^2.0.1",
     "vite": "^2.7.3",
     "vue": "^3.1.0",
     "vue-mobile-detection": "^2.0.1",
+    "vue3-lazyload": "^0.2.5-beta",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index bf812a03..6219865c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,6 +29,7 @@
 import Footer from '@/components/Footer.vue'
 import Header from '@/components/Header.vue'
 import StickyBanner from '@/components/StickyBanner.vue'
+import { mapActions } from 'vuex'
 
 import { Toast } from '@adobe/coral-spectrum/coral-component-toast'
 const appBody = document.getElementById('app')
@@ -83,6 +84,11 @@ export default {
 
   methods:{
 
+  ...mapActions([
+      'setDataToArr',
+      'pushDataToArr',
+    ]),
+
     async fetchSavedIcons(){
       if (!Parse.User.current()){
         return 
@@ -97,7 +103,7 @@ export default {
       let savedIcons = userSavedIconData.map(( icons ) => icons);
       let iconsToShow = []        
 
-      fetchSavedIcons.forEach(icon => {
+      savedIcons.forEach(icon => {
         let newIcon = {}
         for(let prop in icon.attributes){
           newIcon[prop] = icon.attributes[prop]
@@ -107,7 +113,7 @@ export default {
         newIcon.id = icon.id;
       })
       
-      // this.pushDataToArr({ data: iconsToShow, arr: "savedIcons" })
+      this.pushDataToArr({ data: iconsToShow, arr: "savedIcons" })
       console.log(savedIconCount);
       return iconsToShow
     },
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 7a0c4b90..0e719249 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-
-    <deleteDialog :icon="activeIcon"/>
+    <deleteDialog :icon="!activeIcon"/>
 
     <div v-if="overflow"> {{ toggleOverflow() }} </div>
 
     <!-- <StickyBanner/> -->
+    <SaveIconsDialogue v-if="!isAuth"/>
 
     <!-- <coral-dialog id="newDialog" open style="text-align: left;">
       <coral-dialog-header>Pay to view</coral-dialog-header>
@@ -356,7 +356,7 @@
               
               <UserIconCard
                 v-for="icon in search"
-                :key="icon.icnsUrl+icon.appName"
+                :key="icon.id+icon.appName+getSelectedCategory.name"
                 :icon="icon"
                 :isAdmin="isAdmin"
                 :isMacOs="isMacOs"
@@ -385,6 +385,8 @@ import NativeAd from './NativeAd.vue';
 import StickyBanner from './StickyBanner.vue';
 import CarbonAd from './CarbonAd.vue';
 import UserIconCardLoading from './UserIconCardLoading.vue';
+import SaveIconsDialogue from './SaveIconsDialogue.vue';
+
 
 import Parse from 'parse/dist/parse.min.js';
 
@@ -448,6 +450,7 @@ export default {
     StickyBanner,
     CarbonAd,
     UserIconCardLoading,
+    SaveIconsDialogue,
   },
 
   metaInfo: {
@@ -505,6 +508,7 @@ export default {
 
       iconList:{},
       searchString: "",
+      awaitingSearch: false,
       iconsToShow: [],
       list: [],
       
@@ -584,9 +588,11 @@ export default {
     this.searchForPathQuery()
     this.setEventListenersOnStart()
     this.fetchUserAttributes()
+
+    this.isAuth = this.getUser.isAuth
     
     try {
-      await this.fetchSavedIcons()
+      // await this.fetchSavedIcons()
       this.getIconsArray();
     } catch (error) {
       console.log("error: ", error);
@@ -612,7 +618,8 @@ export default {
       'scrollTo',
       'setDataToArr',
       'pushDataToArr',
-      'fetchUserAttributes'
+      'fetchUserAttributes',
+      'fetchSavedIcons'
     ]),
 
     setEventListenersOnStart(){
@@ -659,34 +666,6 @@ export default {
       this.setCategory({name: 'Saved'})
     },
 
-    async fetchSavedIcons(){
-      if (!Parse.User.current()){
-        return 
-      }
-
-      let savedIconsQuery = Parse.User.current().relation("favIcons").query()
-      let userSavedIconData = await savedIconsQuery.descending("createdAt").find()
-
-      let savedIconCount = await savedIconsQuery.count();
-      this.setDataToArr({arr: 'savedIconCount', data: savedIconCount})
-      
-      let savedIcons = userSavedIconData.map(( icons ) => icons);
-      let iconsToShow = []        
-
-      savedIcons.forEach(icon => {
-        let newIcon = {}
-        for(let prop in icon.attributes){
-          newIcon[prop] = icon.attributes[prop]
-        }
-        newIcon.isSaved = true
-        iconsToShow.push(newIcon);
-        newIcon.id = icon.id;
-      })
-      
-      this.pushDataToArr({ data: iconsToShow, arr: "savedIcons" })
-      return iconsToShow
-    },
-
     scrollEl(id, top, left){
       let scrollLeft = document.getElementById(id).scrollLeft
       let scrollTop = document.getElementById(id).scrollTop
@@ -844,7 +823,7 @@ export default {
         return
       }
       
-      if (parent.$store.state.selectedCategory.id != "All") {
+      if (parent.$store.state.selectedCategory.name != "All") {
 
         if (parent.$store.state.totalCategory == parent.selectedIcons.length) {
           parent.scrolledToBottom = true
@@ -866,6 +845,7 @@ export default {
       parent.howManyRecords = howManyRecords + docLimit
 
       const query = new Parse.Query(Icons);
+      query.equalTo("isHidden", false)
       query.equalTo("approved", true)
       query.include("user");
       query.descending("timeStamp");
@@ -877,9 +857,6 @@ export default {
       
       let allIcons = []
 
-      // Save savedIcons IDs to array to compare them to fetched icons
-      let savedIconsId = parent.getSavedIcons.map(({id}) => id )
-
       for(let result in results){
         let iconItem = results[result].attributes
         if (iconItem.user.attributes.isBanned || iconItem.isHidden) continue
@@ -889,11 +866,7 @@ export default {
           iconData[data] = iconItem[data]
         }
 
-        iconData.id = iconItem.id;
-        
-        // Check if icon has been saved by the user
-        iconData.isSaved = savedIconsId.includes(iconItem.id);
-        
+        iconData.id =  results[result].id;
         allIcons.push(iconData)
       }
 
@@ -1053,14 +1026,35 @@ export default {
   },
 
   watch:{
+
+    // searchQuery: _.debounce(function() {
+    //   this.isTyping = false;
+    // }, 1000),
+    // isTyping: function(value) {
+    //   if (!value) {
+    //     this.searchUser(this.searchQuery);
+    //   }
+    // },
+
     searchString: {
       handler(val, oldVal) {
-        let search = val
-        this.setData({state: "searchString", data: search})
-        if (this.$route.name != "Home" && this.$route.name != "Search") {
-          return
-        }
-        this.algoliaSearch()
+        if (this.$route.name != "Home" && this.$route.name != "Search") return;
+
+        if (val == '') this.setData({state: "searchString", data: val}); // Don't wait 500ms before showing empty search results
+
+
+        // if (!this.awaitingSearch && val != '') {
+          this.setData({state: "searchString", data: val})
+          this.algoliaSearch()
+          
+        //   setTimeout(() => {
+        //     this.setData({state: "searchString", data: val})
+        //     this.algoliaSearch()
+        //     this.awaitingSearch = false;
+        //   }, 500); // 1 sec delay
+        // }
+
+        // this.awaitingSearch = true;
       },
       deep: true
     },
@@ -1109,8 +1103,8 @@ export default {
 
     isAdmin(){
       let parent = this
+
       if (parent.getUser.isAuth) {
-        
         if (parent.getUser.userData.Role.objectId == "OoxWjSJuQi") {
           return true
         } else { return false }
diff --git a/src/components/ResourcesCard.vue b/src/components/ResourcesCard.vue
index 16bdeedc..bf835fea 100644
--- a/src/components/ResourcesCard.vue
+++ b/src/components/ResourcesCard.vue
@@ -7,8 +7,12 @@
 
                 <div class="resources-card-wrapper">
                     
-                    <v-lazy-image
-                        :src-placeholder="placeholderImage" :src="getImage" :alt="getImage"
+                    <img
+                        v-lazy="{
+                            src: getImage,
+                            loading: placeholderImage,
+                            error: placeholderImage
+                        }" 
                         :class="{
                             'card-img': true,
                             'resources-card-img': true,
@@ -41,7 +45,6 @@
 import IsNew from "./IsNew.vue";
 
 import Marked from 'marked';
-import VLazyImage from "v-lazy-image";
 import placeholderImage from "../assets/placeholder-image.gif"
 
 export default {
@@ -53,7 +56,6 @@ export default {
     },
 
     components:{
-        VLazyImage,
         IsNew
     },
 
diff --git a/src/components/UserIconCard.vue b/src/components/UserIconCard.vue
index eb35ea25..2845ff4f 100644
--- a/src/components/UserIconCard.vue
+++ b/src/components/UserIconCard.vue
@@ -1,7 +1,9 @@
 <template>
-    <div :label="icon.appName.replaceAll('_', ' ') + 'Icon'" class="card-wrapper card-hover coral-card m-0">
-        
-        <SaveIconsDialogue/>
+    <div
+        v-if="!isHidden.isHidden"
+        :label="icon.appName.replaceAll('_', ' ') + 'Icon'"
+        class="card-wrapper card-hover coral-card m-0"
+    >
 
         <div class="m-auto width-100">
             
@@ -27,10 +29,13 @@
                     @click="addClickCount(icon)"
                     target="_blank"
                 >
-                    <v-lazy-image
-                        :src-placeholder="coralIcons.loading"
-                        :alt="icon.appName +' icon'"
-                        :src="iconUrl(icon)"
+                    <img
+                        v-lazy="{
+                            src: lazyOptions.src,
+                            loading: lazyOptions.loading,
+                            error: lazyOptions.loading,
+                            lifecycle: lazyOptions.lifecycle
+                        }" 
                     />
                 </a>
 
@@ -59,9 +64,9 @@
                     </span>
                 </p>
                 
-                <!-- <div v-if="isOwner" class="p-t-8 p-b-4">
+                <div v-if="isOwner" class="p-t-8 p-b-4">
                     <button @click="showDialog('editIconDialog')" is="coral-button" variant="outline">Edit</button>
-                </div> -->
+                </div>
 
             </div>
 
@@ -84,13 +89,9 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { reactive } from 'vue'
 import Parse from 'parse/dist/parse.min.js';;
 
-import deleteDialog from './deleteDialog.vue';
-import SaveIconsDialogue from './SaveIconsDialogue.vue';
-import EditIconDialog from "./EditIconDialog.vue"
-import VLazyImage from "v-lazy-image";
-
 var Icons = Parse.Object.extend("Icons2");
 
 import downloadIcon from "../assets/icons/Download.svg"
@@ -112,10 +113,6 @@ export default {
     },
 
     components: {
-        EditIconDialog,
-        deleteDialog,
-        SaveIconsDialogue,
-        VLazyImage
     },
 
     data(){
@@ -138,28 +135,63 @@ export default {
             isSaved: false
         }
     },
-    
-    mounted(){
-        console.log(this.icon.isSaved);
-        this.isSaved = this.icon.isSaved;
-    },
 
-    methods:{
-        ...mapActions(['showEl', 'setSelectedIcon', 'addClickCount']),
-
-        prettifyName(name){
-            console.log("name: ", name);
-            name = name.replaceAll("_", " ")
-            return name
-        },
+    setup(context) {
 
-        iconUrl(icon){
+        function iconUrl(){
+            const icon = context.icon;
             if (!icon.lowResPngUrl) {
                 return icon.highResPngUrl
             } else{
                 return icon.lowResPngUrl
             }
-        },
+        }
+
+        let isHidden = reactive({
+            isHidden: context.icon.isHidden
+        });
+
+        const lazyOptions = reactive({
+            src: iconUrl(),
+            loading: placeholderCoralIcon,
+            // src: context.iconUrl(context.icon),
+            lifecycle: {
+                loading: (el) => {
+                    // console.log('image loading', el)
+                },
+                loaded: (el) => {
+                    // console.log('image loaded', el)
+                },
+                error: (el) => {
+                    isHidden.isHidden = true
+                },
+            }
+        })
+        return {
+            iconUrl,
+            isHidden,
+            lazyOptions,
+        }
+    },
+    
+    mounted(){
+        // let iconID = this.icon.id;
+        // let isSaved = this.getSavedIconsId.includes(iconID)
+        // this.isSaved = isSaved;
+    },
+
+    watch:{
+        getSavedIconsId:{
+            handler(val, oldVal) {
+                let iconID = this.icon.id;
+                let isSaved = this.getSavedIconsId.includes(iconID)
+                this.isSaved = isSaved;
+            }
+        }
+    },
+
+    methods:{
+        ...mapActions(['showEl', 'setSelectedIcon', 'addClickCount']),
 
         showDialog(id){
             let parent = this
@@ -190,31 +222,6 @@ export default {
             return date
         },
 
-        async editDoc(icon, e, field){
-            let newName = e.target.value
-            
-            let id
-            if (icon.algoliaID == undefined) {
-                id = icon.id
-            } else {
-                id = icon.algoliaID
-            }
-
-            console.log(icon);
-            console.log(id);
-
-            const IconsBase = Parse.Object.extend("Icons2");
-            const query = new Parse.Query(IconsBase);
-            const docToEdit = await query.get(id)
-
-            docToEdit.set({ [field]: newName }) // Save icnsToStore obj with .icns file and its url to Parse server
-            docToEdit.save().then(() =>{
-                console.log(field, "updated.");
-            }).catch((e) =>{
-                document.getElementById("error").show()
-            })
-        },
-
         async saveIcon(){
             let parent = this
             
@@ -250,10 +257,11 @@ export default {
     computed:{
         ...mapGetters([
             'getUserAttributes',
+            'getSavedIconsId',
         ]),
 
         iconDownloadUrl(){
-            let icon = this.icon
+            const icon = this.icon
             if (this.isMacOs) {
                 return icon.icnsUrl
             } else{
diff --git a/src/components/UserIconGrid.vue b/src/components/UserIconGrid.vue
index a23ea528..55b25e52 100644
--- a/src/components/UserIconGrid.vue
+++ b/src/components/UserIconGrid.vue
@@ -70,39 +70,7 @@ export default {
         parent.isOwner = userMatches
       }
 
-      console.log(this.isIconSaved());
-
-      // function getAd(){
-      //   try {
-      //     if (typeof _bsa !== 'undefined'  && _bsa) {
-      //     _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
-      //       {
-      //         target: '#card-ad',
-      //         template: `
-      //             <a href="##statlink##" target="_blank" rel="noopener sponsored" id="customAd" class="bsa-link">
-      //             <div class="bsa-img-wrapper" style="background-color: ##backgroundColor##;">
-      //               <div class="bsa-icon" style="background-image: url(##logo##);"></div>
-      //             </div>
-      //             <div class="text-ad-wrapper">
-      //               <img style="background: ##backgroundColor##" src="##image##">
-      //               <div class="bsa-desc">##description##</div>
-      //             </div>
-      //             </a>
-      //           `
-      //         }
-      //       )
-            
-      //     }
-      //   } catch (error) {
-      //   }
-      // }
-
-      // window.BSANativeCallback = (a) => {
-      //   const total = a.ads.length;
-      //   let el = document.getElementById('_carbonads_js').children[0]
-      // }
-      // getAd()
-
+      // console.log(this.isIconSaved());
 
     },
 
diff --git a/src/main.js b/src/main.js
index a2402ff9..2ec8a4e6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import App from './App.vue'
 import store from './store/store'
 import router from './router'
 import VueMobileDetection from 'vue-mobile-detection'
+import VueLazyLoad from 'vue3-lazyload'
 // import './registerServiceWorker'
 
 const app = createApp(App)
@@ -12,4 +13,7 @@ configureCompat({ WATCH_ARRAY: false })
 app.use(VueMobileDetection)
 app.use(store)
 app.use(router)
+app.use(VueLazyLoad, {
+    // options...
+  })
 app.mount('#app')
\ No newline at end of file
diff --git a/src/store/store.js b/src/store/store.js
index 1b26dbce..6731a8dc 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -33,7 +33,7 @@ Parse.serverURL = 'https://media.macosicons.com/parse'
 var IconsBase = Parse.Object.extend("Icons2");
 
 const client = algoliasearch(algolia.appid, algolia.apikey);
-const index = client.initIndex('macOSicons')
+const algoliaIndex = client.initIndex('macOSicons')
 
 export default createStore({
 
@@ -238,19 +238,36 @@ export default createStore({
       store.commit('setDataToArr', {arr: 'learningHome', data: await getLearningHome()})
     },
 
-    algoliaSearch(store){
+    async algoliaSearch(store){
       let search = store.state.searchString
       let category = store.state.selectedCategory.id
 
-      if (store.state.selectedCategory.id != "All") {
-        index.search(search, {filters: `approved:true AND category:"`+category+`"`, hitsPerPage: 150 }).then(function(responses) {
-          store.commit('pushDataToArr', {arr: "searchData", data: responses.hits})
+      if (store.state.selectedCategory.name != "All") {
+        
+        let algoliaSearch = await algoliaIndex.search(search, {filters: `approved:true AND category:"`+category+`"`, hitsPerPage: 150 })
+        
+        // Set the value of objectID to a new key named id
+        algoliaSearch.hits = algoliaSearch.hits.map(item => {
+          return {
+            ...item,
+            id: item.objectID 
+          }; 
         });
+        
+        store.commit('pushDataToArr', {arr: "searchData", data: algoliaSearch.hits})
 
       } else{ 
-        index.search(search, {filters: `approved:true`, hitsPerPage: 150 }).then(function(responses) {
-          store.commit('pushDataToArr', {arr: "searchData", data: responses.hits})
+        let algoliaSearch = await algoliaIndex.search(search, {filters: `approved:true`, hitsPerPage: 20 })
+
+        // Set the value of objectID to a new key named id
+        algoliaSearch.hits = algoliaSearch.hits.map(item => {
+          return {
+            ...item,
+            id: item.objectID 
+          }; 
         });
+
+        store.commit('pushDataToArr', {arr: "searchData", data: algoliaSearch.hits})
       }
 
     },
@@ -274,8 +291,6 @@ export default createStore({
       const query = new Parse.Query(IconsBase);
       let selectedCategory = store.state.selectedCategory
       let numToLoad = 30
-
-      console.log("selectedCategory: ", selectedCategory);
       
       if (selectedCategory.name == 'downloads') {
         query.descending("downloads");
@@ -323,27 +338,56 @@ export default createStore({
       }
     },
 
+    async fetchSavedIcons(store){
+      if (!Parse.User.current()){
+        return 
+      }
+
+      let savedIconsQuery = Parse.User.current().relation("favIcons").query()
+      let userSavedIconData = await savedIconsQuery.descending("createdAt").find()
+
+      let savedIconCount = await savedIconsQuery.count();
+      store.commit('setDataToArr', {arr: 'savedIconCount', data: savedIconCount})
+      
+      let savedIcons = userSavedIconData.map(( icons ) => icons);
+      let iconsToShow = []        
+
+      savedIcons.forEach(icon => {
+        let newIcon = {}
+        for(let prop in icon.attributes){
+          newIcon[prop] = icon.attributes[prop]
+        }
+        newIcon.isSaved = true
+        iconsToShow.push(newIcon);
+        newIcon.id = icon.id;
+      })
+      
+      store.commit('pushDataToArr', {data: iconsToShow, arr: "savedIcons" })
+      return iconsToShow
+    },
+
     async setCategory(store, category){
-      let newCategory = category.id
+      let newCategory = category.name
       let oldCategory = store.state.selectedCategory.name
       let sameCategory = newCategory == oldCategory;
       let search = store.state.searchString
       
       store.dispatch('scrollTo')
-      
+      store.dispatch('fetchSavedIcons')
       store.commit('setDataToArr', {arr: 'selectedCategory', data: category, concatArray: false}) // set category
       
+      
+      let savedIcons = store.state.savedIcons
+      
       if (search.length > 0) {
         store.dispatch('algoliaSearch')
       }
 
+      // if (category.name == "All") return;
+
       if (category.name == "Saved" && !sameCategory) {
-        // let savedIconCount = await Parse.User.current().relation('favIcons').query().count();
-        // store.commit('setDataToArr', {arr: 'totalCategory', data: savedIconCount})
-        console.log(store.state.savedIconCount);
+        // let savedIcons = store.state.savedIcons
         store.commit('setDataToArr', {arr: 'totalCategory', data: store.state.savedIconCount})
-        
-        let savedIcons = store.state.savedIcons
         store.commit('pushDataToArr', {arr: "dataToShow", data: savedIcons})
       }
       
@@ -358,7 +402,8 @@ export default createStore({
         if (category.name == "downloads") {
           approvedQuery.descending("downloads");
         } else if (category.id) {
-          let categoryParse = await store.dispatch('queryCategory', {id: newCategory});
+          let categoryParse = await store.dispatch('queryCategory', {id: category.id});
+          console.log('category: ', category);
           approvedQuery.descending("timeStamp");
           approvedQuery.equalTo("category", categoryParse);
         }else{
@@ -366,6 +411,7 @@ export default createStore({
         }
         
         approvedQuery.exists("icnsFile");
+        approvedQuery.equalTo("isHidden", false);
         approvedQuery.equalTo("approved", true);
         approvedQuery.limit(numToLoad)
         approvedQuery.skip(toSkip)
@@ -381,7 +427,8 @@ export default createStore({
           let iconItem = results[result]
           let objData = iconItem.attributes
           let iconData = {}
-
+          iconData.id = iconItem.id
+          
           for(let data in objData){
             iconData[data] = objData[data]
           }
@@ -389,7 +436,7 @@ export default createStore({
           iconData.id = results[result].id
           allIcons.push(iconData)
         }
-        
+
         store.commit('pushDataToArr', {arr: "dataToShow", data: allIcons})
       }
 
@@ -406,30 +453,19 @@ export default createStore({
 
     async fetchUserIcons(store, userObj){
 
-      // let IconsBase = Parse.Object.extend("Icons2");
       let approvedQuery = new Parse.Query(IconsBase);
       let notApprovedQuery = new Parse.Query(IconsBase);
       let numToLoad = 15
-
-      // Hacked Count
-      /////////////////////////////////////////////
-      // let hackedCount = new Parse.Query(IconsBase);
-      // hackedCount.equalTo("isHidden", false || undefined);
-      // hackedCount.equalTo("user", userObj);
-      // hackedCount.equalTo("approved", true);
-      // hackedCount.doesNotExist("icnsFile");
-      // let hacked = await hackedCount.count()
-      // store.state.userIcons.count.hacked = hacked
-      /////////////////////////////////////////////
       
       approvedQuery.limit(numToLoad)
-      // approvedQuery.equalTo("isHidden", false || undefined);
+      approvedQuery.equalTo("isHidden", false);
       approvedQuery.equalTo("user", userObj);
       approvedQuery.equalTo("approved", true);
       approvedQuery.exists("icnsFile");
       approvedQuery.skip(store.state.userIcons.toSkip.approved)
       approvedQuery.descending("createdAt");
       store.state.userIcons.toSkip.approved += numToLoad;
+      
       let iconResults = await approvedQuery.find();
       store.state.userIcons.count.approved = await approvedQuery.count()
       
@@ -437,12 +473,14 @@ export default createStore({
         returnIconData(result, "approved");
       })
       
+      notApprovedQuery.equalTo("isHidden", false);
       notApprovedQuery.limit(numToLoad)
       notApprovedQuery.equalTo("user", userObj);
       notApprovedQuery.skip(store.state.userIcons.toSkip.notApproved)
       notApprovedQuery.equalTo("approved", false);
       notApprovedQuery.descending("createdAt");
       store.state.userIcons.toSkip.notApproved += numToLoad;
+
       let notApproved = await notApprovedQuery.find();
       store.state.userIcons.count.notApproved = await notApprovedQuery.count()
 
@@ -459,11 +497,6 @@ export default createStore({
 
         // Set icon ID to icon properties
         dataToPush.iconData.id = result.id
-        
-        // Pass high res png url if lor res png is not present
-        // if (!icon.lowResPngFile) {
-        //   dataToPush.iconData.lowResPngUrl = icon.highResPngUrl
-        // }
 
         // Set category if empty
         if (!icon.category) {
@@ -734,7 +767,6 @@ export default createStore({
       // Return icons data if the user has NOT searched for something and has clicked to view a category.
       if (selectedCategory == "All" && !store.searchString) {
         return store.list
-        // return store.list
       } else if (selectedCategory != "All" && !store.searchString) {
         try {
           return store.dataToShow.filter(icon => icon.category.id == categoryId);
@@ -841,6 +873,11 @@ export default createStore({
       return store.savedIcons
     },
 
+    getSavedIconsId(store){
+      let savedIconsId = store.savedIcons.map(({id}) => id )
+      return savedIconsId
+    },
+
     getUserAttributes(store){
       return store.userAttributes
     },
diff --git a/src/views/LearningResource.vue b/src/views/LearningResource.vue
index 2ee0de2e..b0e93747 100644
--- a/src/views/LearningResource.vue
+++ b/src/views/LearningResource.vue
@@ -78,9 +78,12 @@
 
           <!-- Image -->
           <figure v-else class="post-full-image">
-            <v-lazy-image
-              :src-placeholder="coralIcons.placeholderImage"
-              :src="getSingleTutorial.feature_image ? getSingleTutorial.feature_image : coralIcons.placeholderImage"
+            <img
+              v-lazy="{
+                  src: getSingleTutorial.feature_image ? getSingleTutorial.feature_image : coralIcons.placeholderImage,
+                  loading: coralIcons.placeholderImage,
+                  error: coralIcons.placeholderImage
+              }" 
             />
           </figure>
         </div>
@@ -155,7 +158,6 @@ import H3Description from '@/components/H3Description.vue'
 import WrittenBy from '@/components/WrittenBy.vue'
 import AboutBlock from '@/components/AboutBlock.vue'
 
-import VLazyImage from "v-lazy-image";
 import Marked from 'marked';
 
 import placeholderCoralIcon from "../assets/placeholder-icon.png"
@@ -171,7 +173,6 @@ export default {
     ResourcesCard,
     NativeAd,
     H3Description,
-    VLazyImage,
     WrittenBy,
     AboutBlock
   },
diff --git a/src/views/ResourceView.vue b/src/views/ResourceView.vue
index 19bfb35b..98818fef 100644
--- a/src/views/ResourceView.vue
+++ b/src/views/ResourceView.vue
@@ -15,10 +15,12 @@
         <!-- Resource Image -->
         <div class="resource-image">  
           <figure class="post-full-image m-0 coral-Well p-0">
-            <v-lazy-image
-              :src-placeholder="placeholderImage"
-              :src="getSingleResourceData.feature_image"
-              :alt="getSingleResourceData.feature_image"
+            <img
+              v-lazy="{
+                  src: getSingleResourceData.feature_image,
+                  loading: placeholderImage,
+                  error: placeholderImage
+              }" 
             />
           </figure>
 
@@ -141,7 +143,6 @@ import { mapActions, mapGetters } from 'vuex';
 import localPosts from '@/api/posts.json';
 import ResourcesCard from '@/components/ResourcesCard.vue'
 import NativeAd from "@/components/NativeAd.vue";
-import VLazyImage from "v-lazy-image";
 import CarbonAd from '@/components/CarbonAd.vue';
 
 import pages from '@/api/pages.json';
@@ -153,7 +154,6 @@ export default {
   components: {
     ResourcesCard,
     NativeAd,
-    VLazyImage,
     CarbonAd
   },