() => {
  const [isChecked, setChecked] = useState(true);
  const handleChange = e => setChecked(e.target.checked);

  const exampleTitle = 'Example title';
  const exampleDescription = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ' +
          'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown ' +
          'printer took a galley of type and scrambled it to make a type specimen book. It has survived not ' +
          'only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.';

  return (
    <>
      <Form.Checkbox 
        className="mb-3"
        checked={isChecked}
        onChange={handleChange}
      >
        Show loading state
      </Form.Checkbox>
      <h3>{isChecked ? <Skeleton /> : exampleTitle}</h3>
      {isChecked ? <Skeleton count={4} /> : exampleDescription}
    </>
)}

() => {
  const [isChecked, setChecked] = useState(true);
  const handleChange = e => setChecked(e.target.checked);

  return (
    <>
      <Form.Checkbox
        className="mb-3"
        checked={isChecked}
        onChange={handleChange}
      >
        Show loading state
      </Form.Checkbox>
      <div>
        {isChecked ? 
          <Skeleton
            circle
            width={200}
            height={200}
          /> 
        : <Image
              alt="some image"
              roundedCircle
              src="https://picsum.photos/200/200/"
          />}
      </div>
    </>
)}

() => {
  const [isChecked, setChecked] = useState(true);
  const handleChange = e => setChecked(e.target.checked);

  const exampleTitle = 'Example title with color theme';
  const exampleDescription = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ' +
          'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown ' +
          'printer took a galley of type and scrambled it to make a type specimen book. It has survived not ' +
          'only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.';

  return (
    <>
      <Form.Checkbox 
        className="mb-3"
        checked={isChecked}
        onChange={handleChange}
      >
        Show loading state
      </Form.Checkbox>
      <SkeletonTheme
        baseColor="lightgrey"
        highlightColor="darkslategrey"
        duration={5}
        direction="rtl"
      >
        <h3>
          {isChecked ? <Skeleton /> : exampleTitle}
        </h3>
        <div>
          {isChecked ? <Skeleton count={4} /> : exampleDescription}
        </div>
      </SkeletonTheme>
    </>
)}

() => {
  const [isChecked, setChecked] = useState(true);
  const handleChange = e => setChecked(e.target.checked);

  const exampleTitle = 'Example title with custom wrapper';
  const exampleDescription = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ' +
          'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown ' +
          'printer took a galley of type and scrambled it to make a type specimen book. It has survived not ' +
          'only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.';
  
  const customWrapper = ({ children }) => {
    return (
      <div
        style={{
          border: '1px solid #ccc',
          display: 'block',
          padding: '0.5rem',
          marginBottom: '0.2rem',
        }}
      >
        {children}
      </div>
    )
  }

  return (
    <>
      <Form.Checkbox 
        className="mb-3"
        checked={isChecked}
        onChange={handleChange}
      >
        Show loading state
      </Form.Checkbox>
      <h3>{isChecked ? <Skeleton wrapper={customWrapper} /> : exampleTitle}</h3>
      <div>{isChecked ? <Skeleton wrapper={customWrapper} count={3} /> : exampleDescription}</div>
    </>
)}