score:1

Accepted answer
import React from "react";
import { Suspense } from "react";
import Loading from "../Loading/Loading";

interface LazyLoadCompProps {
  height?: string;
  width?: string;
}

const LazyLoad: React.FC<LazyLoadCompProps> = ({children, height = "300px", width = "300px"}) => {
  return (
    <Suspense fallback={<Loading height={height} width={width} />}>
      {children}
    </Suspense>
  );
};

export default LazyLoad;

score:0

import React from "react";
import { Suspense } from "react";
import Loading from "../Loading/Loading";

interface LazyLoadRequiredProps {
  children  :    React.ReactNode;
}

interface LazyLoadOptionalProps {
  height   ?:    string;
  width    ?:    string;
}

interface LazyLoadProps extends LazyLoadRequiredProps, LazyLoadOptionalProps {}

const defaultProps: LazyLoadOptionalProps = {
  height: "300px",
  width:  "300px",
}

const LazyLoad = (props: LazyLoadProps) => {
  const {children, height, width} = props;

  return (
    <Suspense fallback={<Loading height={height} width={width} />}>
      {children}
    </Suspense>
  );
};

LazyLoad.defaultProps = defaultProps;

export default LazyLoad;


Related Query

More Query from same tag