All files / src/features/GiveOnboarding/components/loaders FormLoader.tsx

100% Statements 4/4
100% Branches 0/0
100% Functions 2/2
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45          9x   45x                                                   9x 20x                    
import { RectShape } from "react-placeholder/lib/placeholders";
import ReactPlaceholder from "react-placeholder/lib";
import React from "react";
 
const awesomePlaceholder = (
  <div className="ondoarding-modal-placeholder">
    {[5, 4, 3, 2, 1].map((n) => (
      <React.Fragment key={n}>
        <RectShape
          key={`${n}-small`}
          color="rgba(229, 229, 227, 1)"
          style={{
            width: "20%",
            height: 20,
            marginBottom: 20,
            borderRadius: "16px",
          }}
        />
        <RectShape
          key={n}
          color="rgba(229, 229, 227, 1)"
          style={{
            width: "100%",
            height: 48,
            marginBottom: 20,
            borderRadius: "16px",
          }}
        />
      </React.Fragment>
    ))}
  </div>
);
 
export const FormLoader = () => {
  return (
    <ReactPlaceholder
      showLoadingAnimation={false}
      ready={false}
      customPlaceholder={awesomePlaceholder}
    >
      <div />
    </ReactPlaceholder>
  );
};