안녕하세요.
-
하나의 페이지에서 다량의 block을 로딩 시, SQL이 조회되는 순서로 block이 최종적으로 그려지는 형태가 맞을까요?
-
혹시 로딩 중일 때 스켈레톤을 적용할 수 있는 방법이 있을까요?
nextjs에서의 스켈레톤 예시
SQL 조회 순서에 따라 block이 순차적으로 그려지다 보니, 화면 깜빡임을 줄일 수 있는 방법이 있을까 하여 문의드립니다.
안녕하세요.
하나의 페이지에서 다량의 block을 로딩 시, SQL이 조회되는 순서로 block이 최종적으로 그려지는 형태가 맞을까요?
혹시 로딩 중일 때 스켈레톤을 적용할 수 있는 방법이 있을까요?
nextjs에서의 스켈레톤 예시
SQL 조회 순서에 따라 block이 순차적으로 그려지다 보니, 화면 깜빡임을 줄일 수 있는 방법이 있을까 하여 문의드립니다.
@null37
안녕하세요! 문의주셔서 감사합니다.
하나의 페이지에서 다량의 block을 로딩 시, SQL이 조회되는 순서로 block이 최종적으로 그려지는 형태가 맞을까요?
혹시 로딩 중일 때 스켈레톤을 적용할 수 있는 방법이 있을까요?
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
감사합니다. 추가로 궁금하신점은 말씀해주세요.
빠른 업데이트 감사합니다!
요긴하게 잘 사용하겠습니다~!
추가 질문이 있습니다. 대시보드에서 display: metric
타입의 블럭 사용 할 때 스켈레톤의 고정 너비/높이를 적용하기 위해 style:
을 지정하는 순간 기존의 metric의 style도 해제되는 문제가 있는데요.
혹시 기존 style을 override 할 방법이 없을까요?
- type: query
title: 현황
loading: true
display: metric
width: 100%
height: 154px
# minWidth: 154px (minWidth를 사용할 수 없기에 style: 지정하여 사용하려는 것)
내부 엘리먼트 스타일이 해제된 상태
- type: query
title: 현황
loading: true
display: metric
style:
width: 100%
height: 154px
minWidth: 154px
네 말씀주신 경우 아래처럼 width를 밖으로 빼거나 containerClass를 이용해보실 수 있을까요? (필요시 loading 에도 width 설정)
display: metric
style:
height: 200px
width: 100%
# containerClass: w-100
# loading: true
loading:
- type: line
width: 700
별개로 대시보드 쪽 렌더링 관련해서는 개선할 수 있게 리포트하겠습니다.
감사합니다!
답변 감사드립니다!
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에 %는 적용 불가할까요?