Previewer.js

import React from 'react';

import PreView from 'dumi-theme-default/src/builtins/Previewer';
import LazyLoad from 'react-lazyload';
import ProSkeleton from '@ant-design/pro-skeleton';
import { Spin } from 'antd';

export default ({ children, ...rest }) => {
  return (
    <LazyLoad
      height={`calc(${rest.length} + 128px)` || 500}
      offset={500}
      placeholder={
        parseInt(rest.length) > 300 ? (
          <div
            className="__dumi-default-previewer"
            style={{
              padding: 24,
              background: 'rgb(245, 245, 245)',
            }}
          >
            <ProSkeleton type="descriptions"></ProSkeleton>
          </div>
        ) : (
          <div style={{ paddingTop: 100, textAlign: 'center' }}>
            <Spin size="large"></Spin>
          </div>
        )
      }
      once
    >
      <PreView {...rest}>
        <div style={{ minHeight: rest.height }}>{children}</div>
      </PreView>
    </LazyLoad>
  );
};