Smartselect Virtuallist page freezes

Questions
1

Hi,
i have a problem using Smartselect with VL;
I have +6000 elements for my select that i render with a v-for

...
option(value='-1', selected, v-if='!multiple') {{params.defaultOption || 'Seleccione'}}
option(v-for='item in data',
  :value='item[params.idKey || "id"]',
  :key='item[params.idKey]',
  :disabled='item.disabled || false') {{item[[params.descKey || "desc"]]}}
...

the problem is that for +6k elements the page freez before entering, thats bcs the dom is rendering +6k elements. it freez for 10 / 20 seconds depending on the mobile phone.
the smartselect-virtual list works ok, i see the items with top style after opening it.
init f7-ss

this.ssInstance = this.$f7.smartSelect.create({
  el: ".smart-select-custom",
  virtualList: true,
  virtualListHeight: 44,
  openIn: "sheet"
});

im doing something worng?

here its a small example:

im using:
Framework7 5.1.3 + Vue

maybe a solution would be, if its virtualList don not render the select + options, just render the smartselect-vl and take the options form a data param. I can try to make a solution and a PR @nolimits4web if thats ok with you.

2

Wow, it is super slow. But it is actually happen because select is still visible. Just make it hidden (display: none), or add smart-select class to link:

<a class="item-link smart-select-custom" href="#" id="mySS">

change to

<a class="item-link smart-select smart-select-custom" href="#" id="mySS">

And you should see huge performance boost :wink:

3

Sry i should post my full code not just the example.in my production code it has the smart-select class
here is the full code:

li.ss-smart-select-container.v2(:class='{"disabled": preventOpen}')
  .item-content(v-show='params.itemTitle')
    label.type-description(:style='{"font-size": labelFontSize}')
      .icon-container(v-if='icon')
        i(:class='icon')
      | {{params.itemTitle}}
      span.required(v-show='required')  *
  a.item-link.smart-select(href='#',
    :id='params.name || genericName',
    @smartselect:beforeopen='$emit("beforeOpen")',
    @smartselect:closed='$emit("closed")',
    :class='"ss-smart-select-" + genericName')
    select(:id='params.name || selectId',
      disabled,
      :name='params.name || genericName',
      :multiple='multiple',
      :maxlength='maxlength')
      option(value='-1', selected, v-if='!multiple') {{params.defaultOption || 'Seleccione'}}
      option(v-for='item in data',
        :value='item[params.idKey || "id"]',
        :key='item[params.idKey]',
        :disabled='item.disabled || false') {{item[[params.descKey || "desc"]]}}
    .item-content(:class='{ "no-padding-left": noPaddingLeft}')
      .item-inner
        .item-title(:class='{"multiple" : multiple}') {{params.itemTitle || 'Cargando...'}}

also try with display none in the select element

select(:id='params.name || selectId',
  style='display: none'
  disabled,
  :name='params.name || genericName',
  :multiple='multiple',
  :maxlength='maxlength')

but it didnt help.

I think im missing something

4

Never mind, i test your solution in the codesandox with 100k items and it works fine. So the error is in my code. Will look at my code to try and fix it. Thanks!

5

Hidden elements shouldn’t affect the performance (ideally). Try to narrow down the issue:

  • by removing elements and attributes one by one to see what is caused it
  • by adding timestamps to vue component lifecycle hooks to see on what stage it hangs for so long
6

thanks timestamps where helpful.

beforeCreate: 11:20:33
created: 11:20:33
beforeMount: 11:20:33
– 5secs delay –
mounted: 11:20:38

beforeUpdate & updated are never called.

will continue looking for the error.