전역 로딩으로 Sekeleton UI도 처리하기

똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.05.27

 

 

이전링크 에서 전역으로 처리하는 두가지 에러 처리 방식에 공유한 적이 있습니다.
이 때는 skeleton UI 는 사용하지 않고 Spinner 로 처리해서 공통적으로 로딩을 처리할 수 있었는데요,
이번 프로젝트에서는 skeleton UI 로 로딩 처리를 해야만 했습니다.
그래서 결국 고민 끝에 이전 context를 활용한 공통 로딩 로직을 처리하면서도, skeleton UI 또한 적용한 방법이 있어 공유드리고, 고민되는 부분에 대해서 함께 의견주시면 좋을 것 같습니다

 

1. 이전에 전역 로딩을 적용 했을 때와 동일하게 context를 생성했습니다.

GlobalLoadingProvider

return (
    <LoadingContext.Provider value={providerValue}>
      {children}
      {loadingProps?.loadingComponent && (
        <Box flex={1} position="absolute" top={`${top}px`} left={0} w="100%">
          {loadingProps?.loadingComponent}
        </Box>
      )}
    </LoadingContext.Provider>
  );

 

 

2. 그리고 전역으로 사용할 수 있는 스켈레톤 컴포넌트를 생성했습니다.

해당 컴포넌트는 로딩 상태를 GlobalContext에서 갖는 아주 단순한 컴포넌트 입니다.

대신 Sekelton 컴포넌트는 isLoading 동안은 컴포넌트 렌더링이 되지 않으므로 size값은 꼭 직접 넘겨줘야 합니다.

 

GlobalSkeloton

interface GlobalSkeletonProps extends ISkeletonProps {}

const GlobalSkeleton = (props: GlobalSkeletonProps) => {
  const { isLoading } = useContext(LoadingContext);

  return <Skeleton isLoaded={!isLoading} {...props} />;
};

export default memo(GlobalSkeleton);

useGlobalLoadingEffect({isLoading: isFetchingInterestCategoryListData});
  ...

<GlobalSkeleton w="200px" h="100px">
    <NothingConnectWrapper
      onPressConnectPlatformButton={onPressConnectPlatformButton}
    />
  </GlobalSkeleton>

 

 

이렇게 이전에 전역으로 관리하는 Loading의 간편하게 Skeleton UI 까지 호환되게끔 수정하였습니다.

다만..이번 Skeleton UI를 처리하면서 실제 컴포넌트에 Wrapper 처럼 사용될 때 보다 아예 로딩중인 Skeleton 컴포넌트를 따로 짜야했던 경우가 많았습니다.

실제 사용성은 미미했지만... 아무튼 추후 이런식으로 활용해볼 수도 있을 것 같습니다.