Chapter 23無料公開

Accordionが開いた後に遅延読み込み(lazy load)処理をさせる

terrierscript
terrierscript
2021.06.22に更新
このチャプターの目次

Accordionは文字通り閉じる・開くの出来るコンポーネントです。

AccordionItemchildrenfunctionにすることで、「現在開いているかどうか」のフラグを取得する事が出来ます。

<AccordionItem>{({ isExpanded }) => {

この性質を利用してLazy Loadingのようなことをしてみましょう

Lazy Loadingっぽくする

通常、閉じた内部もレンダリングされていますが、場合によっては開いた後に読み込みをしたいケースがあります。

そのような場合は下記のようにfunctional childrenを利用することで解決出来ます

export const LazyLoadingAccordion: FC<{ title: ReactNode }> = ({ title, children }) => {
  const [loaded, setLoaded] = useState(false)
  return <Accordion allowToggle reduceMotion >
    <AccordionItem>{({ isExpanded }) => {
      setLoaded(isExpanded || loaded)
      return <>
        <AccordionButton fontSize="sm" >
          <HStack>
            <AccordionIcon />
            <Box>
              {title}
            </Box>
          </HStack>
        </AccordionButton>
        <AccordionPanel >
          {loaded ? children : <Spinner />}
        </AccordionPanel>
      </>
    }}
    </AccordionItem>
  </Accordion>
}

あとは利用側は下記のように利用できます

<LazyLoadingAccordion title="open heavy compoent">
  <HeavyComponent />
</LazyLoadingAccordion>

サンプル