Load emoji packs that are open in collapse

src/store/modules/emojiPacks.js

@@ -15,11 +15,15 @@ import Vue from 'vue'
 
 const packs = {
   state: {
+    activeCollapseItems: [],
     localPacks: {},
     remoteInstance: '',
     remotePacks: {}
   },
   mutations: {
+    SET_ACTIVE_COLLAPSE_ITEMS: (state, items) => {
+      state.activeCollapseItems = items
+    },
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
@@ -99,6 +103,9 @@ const packs = {
         commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data })
       }
     },
+    SetActiveCollapseItems({ commit, state }, activeItems) {
+      commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
+    },
     async SetLocalEmojiPacks({ commit, getters }) {
       const { data } = await listPacks(getters.authHost)
       commit('SET_LOCAL_PACKS', data)

src/views/emojiPacks/components/RemoteEmojiPack.vue

@@ -1,5 +1,6 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
+    <div v-if="loadRemotePack">
       <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
         <el-form-item :label=" $t('emoji.sharePack')">
           <el-switch v-model="share" disabled />
@@ -57,6 +58,7 @@
           </div>
         </el-collapse-item>
       </el-collapse>
+    </div>
   </el-collapse-item>
 </template>
 
@@ -108,6 +110,9 @@ export default {
         return '120px'
       }
     },
+    loadRemotePack() {
+      return this.$store.state.emojiPacks.activeCollapseItems.includes(this.name)
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {

src/views/emojiPacks/index.vue

@@ -46,7 +46,7 @@
         </div>
       </el-form-item>
       <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
-        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack">
+        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems">
           <remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
         </el-collapse>
       </el-form-item>
@@ -139,6 +139,10 @@ export default {
         type: 'success',
         message: i18n.t('emoji.reloaded')
       })
+    },
+    setActiveCollapseItems(activeItems) {
+      const items = Array.isArray(activeItems) ? activeItems : [activeItems]
+      this.$store.dispatch('SetActiveCollapseItems', items)
     }
   }
 }