4

Now that quick actions can be created using LWCs, the lightning-quick-action-panel component makes consistent styling easy:

<template> <lightning-quick-action-panel header={headerText}> <!-- fields and other content go here --> <div slot="footer"> <!-- buttons go here --> </div> </lightning-quick-action-panel> </template>

But I haven't managed to find a pattern for adding a lightning-spinner so that the spinner covers just the area of the modal including the footer. I've Googled and tried a number of placements. This How to get a spinner on Quick Action LWC? does not provide any markup that solves the problem.

Is there a solution?

PS

The output I get using Damecek's suggestion:

screen shot

Improve this question
5
  • As an alternative, would it be an idea to disable the buttons when the spinner is loading? That might be easier to implement and sort of cleaner from UX standpoint Commented Jul 20, 2021 at 11:05
  • 2
    Hi @Raul, Thanks and that is what I am presently doing and seems good enough for when the component is loading. But the "Save" is quite time consuming so I'd like a spinner for that case. Commented Jul 20, 2021 at 12:16
  • another vote for disabling the button is looking at the normal quick action submit behavior. Button gets disabled and, if there's a loading icon, it's within the modal body only. Commented Jul 20, 2021 at 18:34
  • Exactly like what you mentioned - tried various suggestions, but the spinner just doesn't work right for me in the lightning-quick-action-panel tag. Were you able to resolve this? Commented Nov 29, 2021 at 0:45
  • Hi @goabhigo, No just living with it. Commented Nov 29, 2021 at 9:34

2 Answers 2

Reset to default
1

This is not possible using lightning-quick-action-panel out-of-the-box.

Assuming your goal is to prevent the user from interacting with the buttons while the spinner is visible, a simpler approach is to disable the buttons conditionally based on the same condition:

<template> <lightning-quick-action-panel header="My Quick Action Panel"> <div class="slds-is-relative"> <lightning-spinner lwc:if={loading} style="position: absolute;" alternative-text="Loading"></lightning-spinner> <div class="slds-var-p-around_medium"> <p>Lorem ipsum dolor sit amet, consectetur adipisici...</p> </div> </div> <div slot="footer"> <lightning-button label="Accept" variant="brand" onclick={accept} disabled={loading}></lightning-button> <lightning-button label="Close" onclick={closeModal} disabled={loading} class="slds-var-m-left_small"></lightning-button> </div> </lightning-quick-action-panel> </template>

In my opinion, this approach provides a cleaner UI while preventing any undesired clicks during the loading process.

Modal body overlay and buttons disabled

Improve this answer
0

In new quick-action-panel cmp I am using spinner as this. slds-is-relative will remove the ugly rectangular shadow and thanks to style="min-height: 50vh" the spinner will be visible whole.

<lightning-quick-action-panel header="asd"> <div class="slds-is-relative" style="min-height: 50vh" if:true={spinner}> <lightning-spinner variant="brand"></lightning-spinner> </div> </lightning-quick-action-panel>
Improve this answer
8
  • 1
    I'll try that right now. Immediately inside the lightning-quick-action-panel? Putting it there or outside there the dialog expands vertically and the input fields are still active. So not a good result. Commented Jul 20, 2021 at 12:17
  • inside the lwc cmp Commented Jul 20, 2021 at 12:28
  • Not working for me. Commented Jul 20, 2021 at 13:02
  • how it looks like? update the question with a screenshot Commented Jul 20, 2021 at 13:06
  • 1
    Hi @KrisGoncalves, Your approach for me eaves the spinner slightly under the model header and does not stop the fields from being focusable. But that general approach will work fine as I already have the buttons disabled. Commented Jul 20, 2021 at 17:12

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.