Block 로딩 중 스켈레톤(skeleton) 기능 문의

[null37]

안녕하세요.

1. 하나의 페이지에서 다량의 block을 로딩 시, SQL이 조회되는 순서로 block이 최종적으로 그려지는 형태가 맞을까요?

2. 혹시 로딩 중일 때 스켈레톤을 적용할 수 있는 방법이 있을까요?
   nextjs에서의 스켈레톤 예시

SQL 조회 순서에 따라 block이 순차적으로 그려지다 보니, 화면 깜빡임을 줄일 수 있는 방법이 있을까 하여 문의드립니다.

[hbkim]

@null37
안녕하세요! 문의주셔서 감사합니다.

1. 하나의 페이지에서 다량의 block을 로딩 시, SQL이 조회되는 순서로 block이 최종적으로 그려지는 형태가 맞을까요?

   • YAML의 block 순서대로 그려집니다.

2. 혹시 로딩 중일 때 스켈레톤을 적용할 수 있는 방법이 있을까요?

   • loading: true 사용해서 로딩 표시 가능하도록 업데이트하였습니다. 이외에 덜컹거림은 style height로 크기를 고정해서도 해결 가능합니다.

loading: true 사용법은 아래에 안내드립니다.

menus:
- path: pages/tDvIDv
  name: 새로운 메뉴
pages:
- path: pages/tDvIDv
  title: 제목
  subtitle: 내용
  blocks:
  - type: http
    axios:
      url: http://httpbin.selectfromuser.com/delay/3
      method: GET
    style:
      height: 200px
    loading:
      - type: circle
      - type: line
      - type: line
  - type: http
    axios:
      url: http://httpbin.selectfromuser.com/delay/2
      method: GET
    style:
      height: 200px
    loading: true
  - type: http
    axios:
      url: http://httpbin.selectfromuser.com/delay/1
      method: GET
    style:
      height: 200px
    loading: true

감사합니다. 추가로 궁금하신점은 말씀해주세요.

[null37]

@hbkim

빠른 업데이트 감사합니다!
요긴하게 잘 사용하겠습니다~!

추가 질문이 있습니다. 대시보드에서 display: metric 타입의 블럭 사용 할 때 스켈레톤의 고정 너비/높이를 적용하기 위해 style:을 지정하는 순간 기존의 metric의 style도 해제되는 문제가 있는데요.

혹시 기존 style을 override 할 방법이 없을까요?

style: 사용 전

- type: query
  title: 현황
  loading: true
  display: metric
  width: 100%
  height: 154px  
  # minWidth: 154px (minWidth를 사용할 수 없기에 style: 지정하여 사용하려는 것)

style: 사용 후

내부 엘리먼트 스타일이 해제된 상태

- type: query
  title: 현황
  loading: true
  display: metric
  style:
    width: 100%
    height: 154px  
    minWidth: 154px

[hbkim]

@null37

네 말씀주신 경우 아래처럼 width를 밖으로 빼거나 containerClass를 이용해보실 수 있을까요? (필요시 loading 에도 width 설정)

    display: metric
    style:
      height: 200px
    width: 100% 
    # containerClass: w-100

    # loading: true
    loading:
      - type: line
        width: 700

별개로 대시보드 쪽 렌더링 관련해서는 개선할 수 있게 리포트하겠습니다.
감사합니다!

[null37]

@hbkim

답변 감사드립니다!

loading도 width 지정이 가능하다는 것은 생각을 못 했네요. containerClass와 적절히 사용해 보겠습니다.

loading block의 너비/높이를 잘 지정하게 되면 덜컥거림 없이 각 요소들이 순차적으로 안정적이게 불러와질 것으로 예상하는데요, 그렇다고 하면…

혹시 각 block의 lazy loading이 구현 가능한 부분일까요? 대시보드의 block을 10개 이상 구성하다 보니 SQL이 한 번에 호출되는 부담이 있어서 문의드려봅니다.

+ 추가 질문

작동 O

loading:
  - type: line
     width: 700

작동 X

loading:
  - type: line
     width: 100%

혹시 loading의 width에 %는 적용 불가할까요?