diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-26 17:31:09 +0100 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-27 09:02:02 +0100 |
| commit | 93a774aabcc507820c93e090db04c04841632446 (patch) | |
| tree | d6fedaa30c4114a4ca0e37efbaad68424ced5bd5 /src/components | |
| parent | d5f20e87116bc7d73024bee6c7fa8b35616a57dc (diff) | |
Use virtual scroller for big contacts list display performances
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ContactsList.vue | 25 |
1 files changed, 17 insertions, 8 deletions
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index e2475baf..8a95d155 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -21,23 +21,32 @@ --> <template> - <div id="contacts-list" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list"> - <!-- same uid can coexists between different addressbooks - so we need to use the addressbook id as key as well --> - <contacts-list-item v-for="(contact, index) in list" :key="contact.key" :contact="contacts[contact.key]" - :search-query="searchQuery" :list="list" :index="index" - @deleted="selectContact" /> - </div> + <!-- same uid can coexists between different addressbooks + so we need to use the addressbook id as key as well --> + <recycle-scroller + id="contacts-list" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list" + :items="list" + :item-size="68" + key-field="key"> + <template v-slot="{ item, index }"> + <contacts-list-item :contact="contacts[item.key]" + :search-query="searchQuery" :index="index" :key="item.key" + @deleted="selectContact" /> + </template> + </recycle-scroller> </template> <script> import ContactsListItem from './ContactsList/ContactsListItem' +import { RecycleScroller } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js' +import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' export default { name: 'ContactsList', components: { - ContactsListItem + ContactsListItem, + RecycleScroller }, props: { |