lwc 로딩 중 아이콘 화면에 표시하기 (Spineer) - Displaying icon on screen while loading LWC

 

1. <lightning-spinner> 를 사용하면 된다.

<lightning-spinner alternative-text="템플릿 레코드 생성 중" size="large"></lightning-spinner>

 

 

---

2. 작업예시

<template>
    <div class="container">
        <!-- 작업 중인 아이콘 -->
        <template if:true={isLoading}>
            <lightning-spinner alternative-text="작업 중" size="medium"></lightning-spinner>
        </template>

        <!-- 나머지 컴포넌트 내용 -->
        <div class="other-content">
            <!-- 내용 -->
        </div>
    </div>
</template>

 

//JS파일
import { LightningElement, track } from 'lwc';

export default class MyComponent extends LightningElement {
    @track isLoading = false;

    // 백엔드 작업을 수행하는 메서드
    handleBackendWork() {
        // 작업 중인 상태를 true로 설정하여 작업 중 아이콘을 화면에 보여줌
        this.isLoading = true;

        // 백엔드 작업 수행
        // (예: Apex 호출, 비동기 작업 등)

        // 작업이 완료되면 작업 중인 상태를 false로 설정하여 아이콘을 감춤
        this.isLoading = false;
    }
}

 

 

---

 

 

3. developer 라이브러리 참고

• https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/example

 

 

//html파일
<template>
    <div class="exampleHolder">
        <lightning-spinner alternative-text="Loading" size="xx-small"></lightning-spinner>
    </div>
    <div class="exampleHolder">
        <lightning-spinner alternative-text="Loading" size="x-small"></lightning-spinner>
    </div>
    <div class="exampleHolder">
        <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
    </div>
    <div class="exampleHolder">
        <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
    </div>
    <div class="exampleHolder">
        <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner>
    </div>
</template>


//css파일
.exampleHolder{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
}