Show spinner right next to lightning-input prior to pre-population of the data

Question

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?

Answer 1

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>

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';
  }
}

Answer 3

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: