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

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
    – Raul
    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.
    – Keith C
    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?
    – goabhigo
    Commented Nov 29, 2021 at 0:45
  • Hi @goabhigo, No just living with it.
    – Keith C
    Commented Nov 29, 2021 at 9:34

1 Answer 1

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>
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.
    – Keith C
    Commented Jul 20, 2021 at 12:17
  • inside the lwc cmp
    – Damecek
    Commented Jul 20, 2021 at 12:28
  • Not working for me.
    – Keith C
    Commented Jul 20, 2021 at 13:02
  • how it looks like? update the question with a screenshot
    – Damecek
    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.
    – Keith C
    Commented Jul 20, 2021 at 17:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .