Swipeout deleted-callback Performance

Dears

I have A list of swipteout Items, the function is of swipeleft or swiperight is working fine, as long as the number of items in the list is few the page performance is working fine, if the number of items goes more than 100 or 200 Items the performance of the page is very slow

can you advise if any specific practice I have to make when using the swipeout list in order not to affect the performance?

Thanks

usually the performance is determined by your device
rather than the your code

try virtual-list
see if it makes any change
https://framework7.io/docs/virtual-list.html

Thanks for the response, do virtual list has the same properties and methods as swipeout list?

yes

app.virtualList.create({
  // params
  itemTemplate:'<li class="swipeout"><!--swipeout-content--></li>'
});

Actually I’m creating the complete DOM object with all the swipeout list objects before the page is loaded, so could it be the main issue?

no
it’s not related to your issue

huge dom tree may only create issue with the transition
when you navigate-to-route
you better insert the els in dom on “pageInit”

Actually also I have the slowness behavior when I’m trying to Open the list item detail page
Item list details is a route with component template

Code as below

routes: [
    {
        path: '/inbox-details/:inboxId',
        component: {
            template: `
      <div class="page">
        <div class="page-content" style="background-color: var(--f7-block-strong-bg-color)">
        <div class="list media-list">
                        <ul>
                            <li>
                                <div class="item-content">

                                        <div class="item-inner">
                                            <div class="item-row">
                                                <div class="item-title" style="white-space: normal;"> {{itemTitle}}</div>
                                                <div class="item-after">
                                                     {{#if markAsUnRead}}
                                                        <i class="new-unread-message" id="popup-read-unread"></i>
                                                    {{/if}}
                                                     {{#if markAsRead}}
                                                        <i class="new-read-message" id="popup-read-unread"></i>
                                                    {{/if}}
                                                </div>
                                            </div>
                                            <div class="item-row">
                                                <div class="item-subtitle" style="white-space: normal;"> {{itemSubTitle}}</div>
                                                <div class="item-after" style="white-space: normal;">{{itemDate}}</div>
                                            </div>
                                        </div>
                                </div>
                            </li>
                        </ul>
         </div>
                    <div class="block" style="overflow: auto;"><p id="routerMessageDetailsID"> {{itemText}}</p></div>
        </div>

     <div class="popover popover-extra-links-sub">
        <div class="popover-inner">
           <div class="list">
              <ul>
                  {{#if markAsRead}}
                    <li><a class="list-button item-link extra-options-Filters popover-close" id="markAsReadSubMenuSub" @click="markAsReadButtonClick" href="#">
                    	label.field.messagecentercompose.markAsRead
                    </a></li>
                  {{/if}}
                  {{#if markAsUnRead}}
                    <li><a class="list-button item-link extra-options-Filters popover-close" id="markAsUnReadSubMenuSub" @click="markAsUnReadButtonClick" href="#">
                    	label.field.messagecentercompose.markAsUnRead
                    </a></li>
                  {{/if}}
                 <li><a class="list-button item-link extra-options-Filters popover-close" id="deleteSubMenuSub" @click="deleteButtonClick" href="#" >
                 	label.field.messagecentercompose.delete
                 </a></li>
              </ul>
           </div>
        </div>
     </div>
      </div>
    `,
            data: function () {
                var param = this.$route.params.inboxId;
                return {
                    itemTitle: $$('#'+param).find('.item-title')[0].innerText,
                    itemDate: $$('#'+param).find('.item-after')[0].innerText,
                    itemSubTitle: $$('#'+param).find('.item-subtitle')[0].innerText,
                    itemText: $$('#'+param).find('.item-text')[0].innerHTML,
                    itemInner: $$('#0'+param).find('.item-inner')[0],
                    markAsRead: $$('#read-unread-'+param).hasClass('new-read-message'),
                    markAsUnRead: $$('#read-unread-'+param).hasClass('new-unread-message'),
                    selInboxItem: this.$route.params.inboxId,
                }
            },
        methods: {
            markAsReadButtonClick: function () {
                this.$setState({markAsRead: false});
                this.$setState({markAsUnRead: true});
				this.$root.markAsReadUnRead(this.$route.params.inboxId);
                $$('#popup-read-unread').removeClass('new-unread-message');
                $$('#popup-read-unread').addClass('new-read-message');                    
            },
            markAsUnReadButtonClick: function () {
                this.$setState({markAsRead: true});
                this.$setState({markAsUnRead: false});
                
                this.$root.markAsReadUnRead(this.$route.params.inboxId);
                $$('#popup-read-unread').removeClass('new-read-message');
                $$('#popup-read-unread').addClass('new-unread-message');

            },
            deleteButtonClick: function () {
                var idx = this.$route.params.inboxId;
                this.$f7.dialog.confirm('message.confirmation.messagecentersentitems.DeleteConfirmationItem','label.section.messagecentersentitems.Delete', function () {
		            //call the server
		            app.swipeout.delete($$('#'+idx));
                   	app.views.main.router.back();                    
                });
            },
        },
        on: {  pageBeforeIn: function (e, page) {
					this.$root.getMessageDetails(this.$route.params.inboxId);
					setPageState('message-detail');
                },
                pageAfterIn: function (e, page) {
                    if($$('#read-unread-'+this.$route.params.inboxId).hasClass('new-unread-message')){
                        this.$root.markAsReadUnRead(this.$route.params.inboxId);
                    }
                },
                pageBeforeRemove: function (e, page) {
					setPageState('root');
                },
            },
        },
    },

the code is a little bit messy (for me)
i don’t really understand what’s going on
maybe some more input about the parent page will help

and for your question:
yes
a huge dom tree will also impact the performance of the next-page
since the transition apply also on the previous-page

virtual-list is your way to go

Thanks for your prompt response, I just give it a try for the virtual list, performance now is way much better, but I lost the search functionality,

My old search bar code as below

		                <form class="searchbar searchbar-expandable">
		                    <div class="searchbar-inner">
		                        <div class="searchbar-input-wrap">
		                            <input type="search" placeholder="Search"/>
		                            <i class="searchbar-icon"></i>
		                            <span class="input-clear-button"></span>
		                        </div>
								<span class="searchbar-disable-button if-not-aurora" style="display: block; margin-right: 0px;">
									<layout:message key="label.button.common.cancel" layout="false"/>
								</span>
		                    </div>
		                </form>

also I included the below code in my page

    searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
                            if ( (items[i].subCatDesc.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '')  || 
				 (items[i].subtitle.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') || 
				 (items[i].content.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') ) {
				found.push(i);
			}
        }
        return found; //return array with mathced indexes
    },

I don’t know how to link both search

take a look how it’s done here: