search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.47k stars 254 forks source link

[MultiInput]: [x more link/text takes some time to render for the first time when there are huge no. of tokens] #7479

Closed I506645 closed 10 months ago

I506645 commented 10 months ago

Describe the bug

MultiInput component takes some time to render the actual number for 'x' more text/link when there are huge no. of tokens selected. It shows first some other number and then the actual number of tokens.

Is it possible to add some busy indicator or not display the tokens at all when all the tokens are not rendered. And display the actual and correct number tokens when all the tokens are loaded?

I've attached a sample video reproducing this issue in codesandbox and highlighting the issue through the cursor pointer in the video. Please reach out to me if you need further information.

Isolated Example

https://codesandbox.io/s/suspicious-buck-l44www?file=/src/App.js

Reproduction steps

Check the attached video.

Expected Behaviour

No response

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/121158363/2732773f-1bef-4153-9c95-ee3c769639d1

UI5 Web Components for React Version

1.18

UI5 Web Components Version

1.16

Browser

Chrome

Operating System

mac

Additional Context

No response

Relevant log output

No response

Declaration

Lukas742 commented 10 months ago

Hi @I506645

you're mutating the array const, also you're using the index as key. Both is not recommended in most cases as it can lead to unnecessary rerenders or other problems. (see here and here)

Since the described behavior can also be observed without mutation, I'll forward this issue to the UI5 Web Components repo, as this component is developed there.

Hi colleagues,

here you can find a codeSandbox showing this behavior without our wrapper.

kineticjs commented 10 months ago

Hello @SAP/ui5-webcomponents-topic-rl,

I was able to reproduce the issue when running @Lukas742 's demo sample via the developers' test pages, see the captured video:

https://github.com/SAP/ui5-webcomponents/assets/8408297/4fe6b046-45ab-47b6-87a0-cec4ee08844d

In the video we see that initially the "x" more text shows number that is 1 digit less. Then 1-2 seconds later the correct number is rendered.

Can you check the possibility to render the final (i.e. correct) number only?

Thanks, Diana

ivoplashkov commented 10 months ago

Hello,

This issue would be considered part of the Tokenizer improvements (#7003) and the progress will continue there.

Best regards, Ivaylo