When loading a Flow in a LightningModal the mask (applied as per SLDS guidelines) renders from the top to the bottom of the viewport. It does respect the width of the component (e.g. a small modal will render a less width mask). Also see the added screenshot.
When loading a flow in a quick action it actually renders correctly during load.
Question: can this be prevented? Is there a secret parameter or a css hack? Because this looks like something is quite wrong and feels clumsy for end-users, even though it doesn't stay there for too long.
#Lightning Web Components #Flow
Hi @Rutger Gernandt, in such cases you can add custom styles but they should be loaded by using loadStyle function, so the styles apply to the page and not just to LWC component.
Create styles.css with the following style:
.slds-spinner_container {
background: unset
}
archive it to fixedStyles.zip and upload it as a static resource:
then reference it in your LWC component:
import { loadStyle } from 'lightning/platformResourceLoader';
import fixedStyles from '@salesforce/resourceUrl/fixedStyles';
export default class YourModal extends LightningModal {
connectedCallback() {
loadStyle(this, fixedStyles + '/styles.css');
}
}
And this spinner glitch should be fixed.
