Lookup - Loading indicator is required for server side single select lookup.

[dhumalkishor]

Describe the bug In server side single select lookup loading indicator is required.

To Reproduce Setups to repoduce issue: 

1. Create lookup with soho-lookup component
2. Bind api data with source
3. Used server side data and take large data and response will take 3 to 5 sec 
4. Open Soho-lookup You will observe No Data Available message first and after that data is showing.
5. https://design.infor.com/code/ids-enterprise/latest/demo/components/lookup/example-multiselect-paging-serverside?theme=uplift&variant=light
6. please refer above example have same issue.

Suggested changes not woking as per our expectation:

1. Data Grid Empty meassage:     => As per suggestion, we tried to empty the soho-lookup data grid. For that, we used emptyMessage: SohoEmptyMessageOptions property. But at the start, it shows an empty message, but when we don't get a response from server/API that time we want to show a "No Data Available" message but it shows no message. After the response, we used the same emptyMessage property. 2. BusyIndicator Example:     => We have tried a busy Indicator, but in this, soho-lookup opens immediately and the busy-Indicator is hiding behind the soho-lookup pop-up.

Expected behavior We want to show loading icon still we get response from API for Soho-Lookup component. For few tenants, due to large data, our API gives response after 3 to 4 sec. After opening the soho-lookup component pop-up first shows the loading icon, we still get a response from the API and once we get a response from the API/Server, then they stop the loading icon and show data. If we don't receive any data from API/ Sever in that case, show the "No Data Available" message.   Version

• ids-enterprise-ng: [e.g. v4.9.0 or v4.10.0]

Screenshots If applicable, add screenshots to help explain your problem.

Platform

• Device (if applicable) [e.g. iPhone 6 or Samsung Galaxy S6]
• OS Version: [e.g. Windows 10 or iOS 8]
• Browser Name [e.g. chrome, safari, stock browser]
• Browser Version [e.g. 22, 66.0.3359.181 (Official Build) (64-bit)]

Additional context Add any other context about the problem here.

[tmcconechy]

You have two options already..

1. you can show this loading indicator https://main-enterprise.demo.design.infor.com/components/busyindicator/example-inputs.html this is probably the best as it implies action. Show this first as in the example and then show the modal after you have the data
2. show the loading indicator on the modal https://main-enterprise.demo.design.infor.com/components/busyindicator/test-inside-modal.html

The empty message isnt really for loading. Its to show there is no data but you could show that https://main-enterprise.demo.design.infor.com/components/datagrid/test-empty-message-after-load.html

We could perhaps add an example in the future but the backlog is very big. So please try those examples....

[ojadhav1]

HI @tmcconechy , We have tried all the above options, but it is not working as per expectation. The model is in soho-lookup library , and we don't have access to that model technically/ In code. So technically, we are not able to work on the soho-lookup model part. Is there any property or method of soho-lookup where we can interact with model.

[tmcconechy]

Not 100% sure what you mean about working with the model. I would think you would just need to show it as the modal opens and shide it when you get your data back and send it to the component. From our standpoint we just give you components you can show/hide. We don't do the backend part for you. And i can see thats all working.

We might be able to add a better future example however, but in order to do that i think we would need a reduced test case. Can you put together an example that clearly and simply shows the problem? I.E. an example that shows the above steps 1-6. Also you can mention/show your preferred way in the example? Do you want a busy indicator on the modal or to show the busy indicator on the field? (My preferred is on the field personally)

Here is our latest stackblitz for reproduction: https://stackblitz.com/edit/ids-quick-start-1480?file=src%2Fapp%2Fapp.component.ts where you can put it.

[ojadhav1]

Hi @tmcconechy , We have created stackBlitz for our issue. It will clearly show you what is an issue. We want show busyindicator on model still we get response from our server side API.

stackblitz : https://stackblitz.com/edit/ids-quick-start-1480-5ttlst?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

please prefer above stackBlitz.

[tmcconechy]

I looked at the examples but i dont really understand what im looking at? Can you explain the steps in that example? My suggestion would still be to use https://github.com/infor-design/enterprise-ng/issues/1436#issuecomment-1428010105

https://main-enterprise.demo.design.infor.com/components/busyindicator/example-inputs.html seems like the best way

[ojadhav1]

Steps to reproduce the issue

1. After opening Stackblitz, you can see the SOHO lookup component.
2. Click on the lookup component button.
3. Now you can see the SOHO lookup component model.
4. For 5–6 seconds, you can see the "No data available" message or an empty model in the SOHO lookup component model.
5. After that, the data is loading 

Expected behaviour:

We want to show a loading icon while still receiving API responses for the Soho-Lookup component. For a few tenants, due to large amounts of data, our API gives responses after 3–4 seconds. After opening the SOHO-lookup component pop-up, it first shows the loading icon, but we still get a response from the API. Once we get a response from the API or server, they stop the loading icon and show data. If we don't receive any data from API/Sever in that case, show the "No Data Available" message.

The exact issue is in the 4th step, and we needed a solution for the 4th step.

For your reference, we have attached a video of the issue.

https://user-images.githubusercontent.com/125030051/229592553-6b21f1a6-d619-4950-a46e-1744f1ab00f3.mp4

[tmcconechy]

Ok, i think i get it. Another option is to use this https://main-enterprise.demo.design.infor.com/components/busyindicator/example-inputs.html and show it before opening the modal.

Should work ok like that and not require any additional work by anyone.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.