투명 스크린을 설치해 봤어요.
4347 단어 Reactreactcontentloadertech
개시하다
골격 스크린을 설치하는 데 사용
react-content-loader에 관한 글이다.Create React Content Loader의 페이지에도 코드가 생성되었는데 매우 편리한 도구이기 때문에 시도한 일을 총괄하였다.투명 화면
화면에 표시된 데이터를 로드하기 전에 컨텐츠 프레임의 UI를 미리 표시하기만 하면 됩니다.
이런 놈이야.
화면의 이점
화면에 표시된 데이터를 읽기 전에 로드, 드러머, 공백 화면을 표시하는 것보다 색판은 대기 체감 시간을 단축하는 장점이 있다.(큰 차이는 없는 것 같다.)
Skeleton screens (as splash screens), when used to indicate that a screen is loading, are perceived as being shorter in duration when compared against a blank screen (our control) and a spinner — but not by much
또 프레임을 미리 보여줘야 하기 때문에 레이아웃의 변화는 원래 일어나지 않는다.(로드 중과 결과 화면이 느슨해지지 않음 등)
레이아웃 오프셋은 렌더링된 프레임에서 다음 프레임으로 요소를 표시하는 위치가 변경될 때 발생합니다.
다른 한편, 화면과 실제 결과가 일치하지 않으면 사용자를 혼란스럽게 하고 좌절시킬 수 있다.
When the skeleton screen doesn’t match the outcome, we’ve created confusion and frustration that will overcome any benefit you might have gotten from trying to handle that delay in a better way.
해본 일
다음은 이번 시도의 일이다.
(1) 투명 화면 디자인
https://github.com/danilowoz/react-content-loader
$ yarn add react-content-loader
Create React Content Loader에서 (1) 디자인된 투명 화면 구성 요소를 만듭니다.
(4) 프로젝트 내 실시(3)에서 생성된 구성 요소
이번에 우리는 카드의 투명 스크린을 만들어서 일람된 화면에 로딩에 표시하도록 했다.
실제 이미지, 참조 코드(vercel/commerce)
https://github.com/vercel/commerce/blob/main/site/components/search.tsx#L333
끝말
react-content-loader 처음 사용하지만 매우 편리합니다.이루어져서 즐거웠어요.
참고 자료
Reference
이 문제에 관하여(투명 스크린을 설치해 봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/shimabukuromeg/articles/b9838b83928d7b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
