1

Requirement: I have a simple input form (LWC) where our customers can enter necessary details and submit it our approvals team. We have an input field where we are pre-populating it with the data coming from our internal API. Now that it's an input field, we are giving an opportunity to 'edit' its value prior to submission.

Issue: Now, as we are getting the data from API, there is a delay in rendering the data onto this field, so we are trying to implement a small lightning-spinner next to the input box so our customers can see some processing and data is being retrieved. But, my implementation making the spinner to hide the entire form.

LWC.html

<div class="slds-col slds-size_3-of-12"> <abbr title="required" class="slds-required">*</abbr> <label class="fld-label">National Data: </label> <lightning-input type="text" name="National_Data" variant="label-hidden" value={nationalData} data-id="nationalDataRate" data-target-id="nationalData" minlength="1" maxlength="2" onchange={handleChange} onblur={handleOnBlur} message-when-value-missing="Enter data."></lightning-input> </div> <div class="slds-col slds-size_1-of-12" style="padding-left: 0px;padding-top: 26px;"> <template if:false={isLoaded}> <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner> </template> <template if:true={isLoaded}> <span>$$</span> </template> </div>

LWC.js

isLoaded = false; //Webservice callout //Once the data is available, setting back the value to 'true' this.isLoaded = !this.isLoaded;

Question: How to achieve the spinner to spin right next to the input field box, but not on the entire form?

Improve this question

3 Answers 3

Reset to default
3

You should probably use @sfdcfox's answer, but if you want the raw html, you can also plonk this down. It could be useful if you can't get the input configured exactly as you want it:

<div class="slds-form-element slds-form-element_stacked"> <label class="slds-form-element__label" for="input1">National Data:</label> <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right"> <input id="input1" type="text" class="slds-input" value={nationalData}> <div if:true={isLoading} class=" slds-input__icon slds-input__icon_right"> <div role="status" class="slds-spinner slds-spinner_x-small"> <span class="slds-assistive-text">Loading</span> <div class="slds-spinner__dot-a"></div> <div class="slds-spinner__dot-b"></div> </div> </div> </div> </div>
Improve this answer
2

You could use the search type, which includes a is-loading attribute. I wrote a very basic demo that shows this.

<template> <lightning-input type="search" label="Demo" is-loading={isLoading}></lightning-input> <lightning-button onclick={search} label="Search"></lightning-button> <hr /> <lightning-formatted-text value={message}></lightning-formatted-text> </template> 
import { LightningElement } from "lwc"; export default class App extends LightningElement { message = 'Ready to search...'; isLoading = false; async search() { this.isLoading = true; this.message = 'Searching...'; // Simulate waiting for three seconds await new Promise((resolve)=>setTimeout(resolve,3000)); this.isLoading = false; this.message = 'Done searching'; } }
Improve this answer
0

Thank you @sfdcfox and @CasparHarmer for your solutions. I've tried simple CSS implementation from this Salesforce spinner example: Display a Spinner Conditionally and it worked for my requirement. Here is the sample code:

Adding loadSpinner CSS class to the parent div:

<div class="slds-col slds-size_1-of-12 loadSpinner" style="padding-left: 0px;padding-top: 10px;"> <template if:false={isLoaded}> <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner> </template> <template if:true={isLoaded}> <span>$$</span> </template> </div>

CSS:

.loadSpinner{ position: relative; display: inline-block; margin-top: 15px; width: 0px; vertical-align: middle; white-space: nowrap; }

Screenshot of the input field with Spinner on the right:

Screenshot of the input field with Spinner on the right

Improve this answer

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.