my app issue

[tbettinazzi@axioma.it]

In my application I’ve pages with a lot of elements.

When the page is shown it seems to freeze for a second or two before the content is completely usable and correctly formatted.

I tested with last versions of Chrome and Firefox.

My client is a quite powerfull system.

How can I improuve the user experience.

Tks

[admin]

Hi,

One common approach is to initialize elements on demand when they are necessary. I do not know what your application is, but for example, if you have tabs, initialize the elements which are inside the tabs when the tab is clicked. Similar approach can be applied if you use Accordion.

Hope this information helps.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tabs are not the main cause of the performance problem.

One, but not the only, problem seems to come out from dropdown lists having a lot of list-items.

I’ve a page with only one dropdown list in it with many (more than 100) list items : the page seems to freeze for 2 seconds before it’s shown correctely.

Is there a workaround for that ?

Tks

[admin]

Hi,

Yes, there is. You can use the dataSource property to set the items instead of creating html element for each item.

Example:

` document.getElementById(‘dropDownListMethodsDemo’).dataSource =
[{
label: “Andrew”,
value: 1,
group: “Product Owners”
},
{
label: “Natalia”,
value: 2,
group: “Developers”
},
{
label: “Michael”,
value: 3,
group: “Developers”
},
{
label: “Angel”,
value: 4,
group: “Product Owners”
},
{
label: “Hristo”,
value: 5,
group: “Developers”
},
{
label: “Peter”,
value: 6,
group: “Developers”
},
{
label: “Albert”,
value: 7,
group: “Support”
},
{
label: “George”,
value: 8,
group: “Support”
}];`

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tks for your help, I’ll try as soon as possible.

However I need to add, to each value, a class : is it possible with data-source ?

My classes (e.g. bg-1) are defined in this way

.bg-1 .smart-list-item-container {
background-color: blue
}

should I change such definitions ?

Tks

 

[tbettinazzi@axioma.it]

Anyway I tested

<smart-drop-down-list filterable=”true” filter-mode=”containsIgnoreCase” id=”e47522256″ min-length=”1″ selectionMode=”zeroOrOne” class=”elemento_combobox_valore” name=”e47522256″ selected-indexes=”[4]” required=”” onchange=”mostraAlertMsgOption(this); eseguiRefresh(this);” onfocus=”on_focus(this)”
data-source=[{label: ‘WAM ROMANIA’, value: ‘AF’}, {label: ‘WAM PRODUCT’, value: ‘AA’}]>
</smart-drop-down-list>

And I allways get an error :

expected property name or ‘}’ at line 1 column 3 of the JSON data

What’s wrong ?

Tks

• This reply was modified 1 year, 5 months ago by tbettinazzi@axioma.it.

[svetoslav_borislavov]

Hi,

Could you, please set the data source programmatically this way: https://codepen.io/svetoslavb04/pen/oNyvPZN

I hope this demo helps! If you need further assistance, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tested Your suggestion which improves the result from more thn 2 secs to 1.5 secs.

However is still quite long time when I’ve more than a dropdown list in my page.

Is there any way to improve further the performances ?

Tks

[svetoslav_borislavov]

Hi,

Could you, please import only the necessary elements?
For example: ‘smart-webcomponents/source/modules/smart.dropdownlist.js’

I am looking forward to hearing from you!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Unfortunately I can’t because my page is generated at runtime and I don’t know which kind of elements are in that page.

Anyway I did it in a simple testcase I created and it doesn’t change the page building time.

On the other hand the js file are cached and the loading time of the js doesn’t seem to be a problem.

Tks

[tbettinazzi@axioma.it]

I created a testcase to reproduce the problem.

Is quite huge because I copied it from my real world.

Please provide me a way to send You the code.

Not all the code is needed but if I can’t clean up the unneeded parts.

The examples shows that the page buid up time is quite long (6 seconds) and it depends entierely from a large dropdown list.

Please suggest a solution to improve significantely the response time.

Tks

• This reply was modified 1 year, 5 months ago by tbettinazzi@axioma.it.

[svetoslav_borislavov]

Hi,

You can send it here svetoslav@jqwidgets.com

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Sent.

Tks

[svetoslav_borislavov]

Hi,

I received your example. I have modified it a little bit.
Since loading data with the property ‘ virtualized’ of the list box significantly increases the performance I have implemented a drop-down list with the combination of a drop-down button and a list box. Also, I have applied some CSS as you can see in the ‘elementi.css’.
You can download a copy of the modified version from here: https://easyupload.io/0eeudv
See how a managed to do the drop-down list and you can implement it with every drop-down list which has got many data.

Please use this method only when you have got many data. For a drop-down with a few list items use the default drop-down list.

See ‘elementi.css’, ‘index.html’, ‘combobox.js’

I hope this helps!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tks for your help.

Just a few questions :

• also DropDownList has a virtualized property, why did You suggest ListBox  in spite of DropDownList ?
• are there drawback using virtualized propery (eg. filter don’t work or any other feature missnig) ?

Tks

Tullio

[Author]

Posts