[fitpet]isLoadingを適用したskleton UIはロードされていません
ケース
isLoadingがtrueの場合、skleton UIを適用しようとしますが、アプリケーションの画像は表示されず、空の画像しか表示されません.
しかし同じisLoadingの
지금 이 숙소가 인기있어요部分skleton UIアプリケーションを使うのはとても良いです...だから私は何か問題があるのか分かりません.
const HotelSlider = ({ isLoading }) => {
const regions = useSelector((state) => state.hotelMain.regions);
// 210905 by.dy
// 로딩 스피너 제거 & 스켈레톤 UI 적용
return (
<SliderWrapper>
<Content>
<PillWrapper ref={slideRef}>
{regions.map((region, i) => {
return (
<div className='PillBox' key={i}>
{/* 로딩 스피너 제거 & 스켈레톤 UI 적용 */}
{<PillBoxSkeleton isLoading={isLoading} margin='0 3rem 0 0' />}
<PillBox key={region.id} region={region} margin='0 3rem 0 0' />
</div>
);
})}
</PillWrapper>
</Content>
<ControlsBtn>
<PrevBtn ref={prevBtnRef}>
<SliderLeftButton handleClick={prevSlide}></SliderLeftButton>
</PrevBtn>
<NextBtn ref={nextBtnRef}>
<SliderRightButton handleClick={nextSlide}></SliderRightButton>
</NextBtn>
</ControlsBtn>
</SliderWrapper>
);解決策
ゾーンデータとhitsListデータのロード時間が異なるため、isLoadingよりもゾーンの値があるかどうかがskeleton UIを表示するのに適しています.
<Content>
<PillWrapper ref={slideRef}>
{/* regions 데이터가 없을 때 (로딩 중) */}
{regions.length === 0 ? (
<>
<div className='PillBox'>
{<PillBoxSkeleton margin='0 3rem 0 0' />}
</div>
<div className='PillBox'>
{<PillBoxSkeleton margin='0 3rem 0 0' />}
</div>
<div className='PillBox'>
{<PillBoxSkeleton margin='0 3rem 0 0' />}
</div>
</>
) : (
''
)}
{regions.map((region, i) => {
return (
<div className='PillBox' key={i}>
{/* 로딩 스피너 제거 & 스켈레톤 UI 적용 */}
<PillBox key={region.id} region={region} margin='0 3rem 0 0' />
</div>
);
})}
</PillWrapper>
</Content>結果
心得
redus開発者ツールを使用して、動作が発生するたびにstate、diffで表示しますが、秒単位で表示するとは思いませんでした.
秒単位で見ることができないため、高速移動のデータ値に何か問題があるのか、もちろん問題の原因も分かりません.
今回は秒単位で直接行動し、すぐに原因を見つけた.
Reference
この問題について([fitpet]isLoadingを適用したskleton UIはロードされていません), 我々は、より多くの情報をここで見つけました https://velog.io/@97godo/fitpet-isLoading으로-적용시킨-스켈레톤-UI가-안불러와짐テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol