Dynamically show sub-menu with busy indicator

[rv97]

Feature Request Description

Our team (LWV-SAP Analytics Cloud) uses ui5-webcomponents. We have a situation where on click of a menuItem, we have to show a sub-menu which is dynamic in nature and until that is shown, a busy indicator needs to be displayed.
Let me explain in detail.

1. When I click on a menu Item, an async call happens.
2. Until the async call is in progress, I need to show a busy indicator.
3. Once the async call is finished, I need to show the menu Items based on the result of the async call.

I tried to do the same with current Menu and MenuItem. But it seems to be behaving weirdly. You can find the current issue here.
https://sap-my.sharepoint.com/:v:/p/vignesh_r02/EVqrMufbaMlOlDrM4uZp3XUBL2exhmNHPu95VUzpR_IIDw?e=DHsBpY

Proposed Solution

We need to have a way to show the sub menu items with the busy indicator first and then the menuItems dynamically. Like this.
https://sap-my.sharepoint.com/:v:/p/vignesh_r02/EXjtACkDM8NBgTMtKkSSd_IBlv7VZFrlUl-0gNl1N1jhEA?e=TqIcll

Proposed Alternatives

We have tried adding the Busy Indicator inside the MenuItem. But it does seem to render at random places and does not re-render when the actual data comes.

Priority

• Low
• Medium
• High
• Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: SAP Analytics Cloud
• Business impact: Will not able to release the feature because it depends on this dynamic loading of sub-menu.

[dimovpetar]

Hello @rv97,

Check out this example https://codesandbox.io/s/ui5-webcomponents-forked-j5wjpi?file=/index.html
I tried to wrap the menu item with busy indicator without success, like:

<ui5-menu-item text="Open" icon="open-folder" starts-section>
    <ui5-busy-indicator active>
        <ui5-menu-item text="Open Locally" icon="open-folder">
            <ui5-menu-item text="Open from C"></ui5-menu-item>
            <ui5-menu-item text="Open from D"></ui5-menu-item>
            <ui5-menu-item text="Open from E"></ui5-menu-item>
        </ui5-menu-item>
    </ui5-busy-indicator>
    <ui5-menu-item text="Open from Cloud"></ui5-menu-item>
</ui5-menu-item>

Is this the same thing that you have tried?

Best regards,
Petar

[rv97]

Hey @dimovpetar,

Whatever the code you shared seems to do a different thing. I could see a menu button and a busy indicator in the bottom. That is not what I want. Let me try to explain much more in detail.

Lets take an example.

1. I have a dropdown menu called "Tools". When I click on this a menu opens with three items. (A. Stories, B. Bookmarks, C. Filters).
2. The first sub-menu "Stories" has another sub-menu. When I click on that I shows me a sub-menu of list of stories to the right of it.
3. But I do not know what all stories are there in the beginning. I need to render them dynamically. Only when I click on the "Stories" sub-menu, an async call happens which gives me a list of stories. The number of stories can be different each time based on the call.
4. So, if a user clicks on the "Stories", until the async call is finished, it should a sub-menu with busy indicator and when the actual data has come, it should re-render them immediately.

The following link shows what's the expectation.
https://sap-my.sharepoint.com/:v:/p/vignesh_r02/EXjtACkDM8NBgTMtKkSSd_IBlv7VZFrlUl-0gNl1N1jhEA?e=TqIcll

In the above link, when I click on the "Open Saved Bookmarks", it shows another sub-menu to the right of it with a busy indicator when the async call is happening and when the data is there, it renders them automatically.

Do let me know if there is anything else.

Regards,
Vignesh R

[NHristov-sap]

Hi @rv97 ,

I am lowering the priority to Medium as this is not something that can be classified as Very High.
It seems this is a feature request, but first I am going to discuss this with the responsible Product Owner, and then will update this issue.

Best Regards,
Nikolay Hristov

[rv97]

Hi @NHristov-sap,

Thanks for the reply. Yes I raised it as a feature request because I tried multiple options and also checked with the webcomponents team in the slack channel. There seems to be no existing solution for this.
The reason I gave it a Very High was this is an important feature for us and without this dynamic menu working, we would not be able to proceed. Can you try considering to increase the priority of this?

Regards,
Vignesh R

[scameron]

Hi @NHristov-sap, @dimovpetar, were you able to have a chance to discuss this feature request? Does it seem like something you'd be able to add?

[kskondov]

Hello @SAP/ui5-webcomponents-topic-b, can you pleas take another look of this feature request.