integrate withLoadMore HOC into List

src/components/settings_modal/helpers/vertical_tab_switcher.scss

@@ -40,6 +40,7 @@
 
     .tab-slot-wrapper {
       flex: 1 1 auto;
+      position: relative;
       height: 100%;
       padding: 0 1em;
       overflow-y: auto;
@@ -56,10 +57,16 @@
         }
 
         &.-full-height {
+          height: 100%;
           > * {
             height: 100%;
           }
         }
+
+        &.-full-width.-full-height {
+          position: absolute;
+          inset: 0;
+        }
       }
     }
 

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -1,11 +1,11 @@
 import { get, map, reject } from 'lodash'
 
-import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
 import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import BlockCard from 'src/components/block_card/block_card.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'
+import List from 'src/components/list/list.vue'
 import MuteCard from 'src/components/mute_card/mute_card.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
@@ -14,32 +14,6 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
-const BlockList = withLoadMore({
-  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-  select: (props, $store) =>
-    get($store.state.users.currentUser, 'blockIds', []),
-  destroy: () => {
-    /* no-op */
-  },
-  childPropName: 'items',
-})(SelectableList)
-
-const MuteList = withLoadMore({
-  fetch: (props, $store) => $store.dispatch('fetchMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  destroy: () => {
-    /* no-op */
-  },
-  childPropName: 'items',
-})(SelectableList)
-
-const DomainMuteList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
-  select: (props, $store) =>
-    get($store.state.users.currentUser, 'domainMutes', []),
-  childPropName: 'items',
-})(SelectableList)
-
 const MutesAndBlocks = {
   data() {
     return {
@@ -52,12 +26,10 @@ const MutesAndBlocks = {
   },
   components: {
     TabSwitcher,
-    BlockList,
-    MuteList,
-    DomainMuteList,
-    BlockCard,
-    MuteCard,
     DomainMuteCard,
+    BlockCard,
+    List,
+    MuteCard,
     ProgressButton,
     Autosuggest,
     Checkbox,
@@ -102,6 +74,15 @@ const MutesAndBlocks = {
         })
         .join('\n')
     },
+    getBlocks() {
+      return get(this.$store.state.users.currentUser, 'blockIds', [])
+    },
+    getMutes() {
+      return get(this.$store.state.users.currentUser, 'muteIds', [])
+    },
+    getDomainMutes() {
+      return get(this.$store.state.users.currentUser, 'domainMutes', [])
+    },
     activateTab(tabName) {
       this.activeTab = tabName
     },

src/components/settings_modal/tabs/mutes_and_blocks_tab.scss

@@ -1,5 +1,5 @@
 .mutes-and-blocks-tab {
-  height: 100%;
+  min-height: 100%;
 
   .usersearch-wrapper {
     padding: 1em;
@@ -26,4 +26,12 @@
     margin-top: 1em;
     width: 10em;
   }
+
+  .blocks, .mutes {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: absolute;
+    inset: 0;
+  }
 }

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -1,9 +1,12 @@
 <template>
   <tab-switcher
-    :scrollable-tabs="true"
     class="mutes-and-blocks-tab"
-  >
-    <div :label="$t('settings.blocks_tab')">
+    :scrollable-tabs="true"
+    >
+    <div
+      class="blocks"
+      :label="$t('settings.user_blocks')"
+    >
       <div class="usersearch-wrapper">
         <Autosuggest
           :filter="filterUnblockedUsers"
@@ -17,9 +20,12 @@
           </template>
         </Autosuggest>
       </div>
-      <BlockList
-        :refresh="true"
+      <List
         :get-key="i => i"
+        :items-function="getBlocks"
+        :fetch-function="() => $store.dispatch('fetchBlocks')"
+        scrollable
+        selectable
       >
         <template #header="{selected}">
           <div class="bulk-actions">
@@ -51,103 +57,106 @@
         <template #empty>
           {{ $t('settings.no_blocks') }}
         </template>
-      </BlockList>
+      </List>
     </div>
 
-    <div :label="$t('settings.mutes_tab')">
-      <tab-switcher>
-        <div :label="$t('settings.user_mutes')">
-          <div class="usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnMutedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_mute')"
+    <div class="mutes" :label="$t('settings.user_mutes2')">
+      <div class="usersearch-wrapper">
+        <Autosuggest
+          :filter="filterUnMutedUsers"
+          :query="queryUserIds"
+          :placeholder="$t('settings.search_user_to_mute')"
+        >
+          <template #default="row">
+            <MuteCard
+              :user-id="row.item"
+            />
+          </template>
+        </Autosuggest>
+      </div>
+      <List
+        :get-key="i => i"
+        :items-function="getMutes"
+        :fetch-function="() => $store.dispatch('fetchMutes')"
+        scrollable
+        selectable
+      >
+        <template #header="{selected}">
+          <div class="bulk-actions">
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn button-default"
+              :click="() => muteUsers(selected)"
             >
-              <template #default="row">
-                <MuteCard
-                  :user-id="row.item"
-                />
+              {{ $t('user_card.mute') }}
+              <template #progress>
+                {{ $t('user_card.mute_progress') }}
               </template>
-            </Autosuggest>
+            </ProgressButton>
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn button-default"
+              :click="() => unmuteUsers(selected)"
+            >
+              {{ $t('user_card.unmute') }}
+              <template #progress>
+                {{ $t('user_card.unmute_progress') }}
+              </template>
+            </ProgressButton>
           </div>
-          <MuteList
-            :refresh="true"
-            :get-key="i => i"
-          >
-            <template #header="{selected}">
-              <div class="bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn button-default"
-                  :click="() => muteUsers(selected)"
-                >
-                  {{ $t('user_card.mute') }}
-                  <template #progress>
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn button-default"
-                  :click="() => unmuteUsers(selected)"
-                >
-                  {{ $t('user_card.unmute') }}
-                  <template #progress>
-                    {{ $t('user_card.unmute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-            </template>
-            <template #item="{item}">
-              <MuteCard :user-id="item" />
-            </template>
-            <template #empty>
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </MuteList>
-        </div>
+        </template>
+        <template #item="{item}">
+          <MuteCard :user-id="item" />
+        </template>
+        <template #empty>
+          {{ $t('settings.no_mutes') }}
+        </template>
+      </List>
+    </div>
 
-        <div :label="$t('settings.domain_mutes')">
-          <div class="domain-mute-form">
-            <Autosuggest
-              :filter="filterUnMutedDomains"
-              :query="queryKnownDomains"
-              :placeholder="$t('settings.type_domains_to_mute')"
+    <div :label="$t('settings.domain_mutes2')">
+      <div class="domain-mute-form">
+        <Autosuggest
+          :filter="filterUnMutedDomains"
+          :query="queryKnownDomains"
+          :placeholder="$t('settings.type_domains_to_mute')"
+        >
+          <template #default="row">
+            <DomainMuteCard
+              :domain="row.item"
+            />
+          </template>
+        </Autosuggest>
+      </div>
+      <List
+        :get-key="i => i"
+        :items-function="getDomainMutes"
+        :fetch-function="() => $store.dispatch('fetchDomainMutes')"
+        scrollable
+        selectable
+      >
+        <template #header="{selected}">
+          <div class="bulk-actions">
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn button-default"
+              :click="() => unmuteDomains(selected)"
             >
-              <template #default="row">
-                <DomainMuteCard
-                  :domain="row.item"
-                />
+              {{ $t('domain_mute_card.unmute') }}
+              <template #progress>
+                {{ $t('domain_mute_card.unmute_progress') }}
               </template>
-            </Autosuggest>
+            </ProgressButton>
           </div>
-          <DomainMuteList
-            :refresh="true"
-            :get-key="i => i"
-          >
-            <template #header="{selected}">
-              <div class="bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn button-default"
-                  :click="() => unmuteDomains(selected)"
-                >
-                  {{ $t('domain_mute_card.unmute') }}
-                  <template #progress>
-                    {{ $t('domain_mute_card.unmute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-            </template>
-            <template #item="{item}">
-              <DomainMuteCard :domain="item" />
-            </template>
-            <template #empty>
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </DomainMuteList>
-        </div>
-      </tab-switcher>
+        </template>
+        <template #item="{item}">
+          {{ item }}
+          <DomainMuteCard :domain="item" />
+        </template>
+        <template #empty>
+          {{ $t('settings.no_mutes') }}
+        </template>
+      </List>
     </div>
   </tab-switcher>
 </template>