DocSpace-client/packages/shared/skeletons/settings/Settings.ds-connect.tsx

import React from "react";
import { LOADER_STYLE } from "@docspace/shared/constants";

import { RectangleSkeleton } from "../rectangle";

import { StyledSMTPContent } from "./Settings.styled";

const speed = 2;

export const SettingsDSConnectSkeleton = () => {
  const firstComponent = (
    <div>
      <div>
        <RectangleSkeleton
          height="22"
          width="56"
          backgroundColor={LOADER_STYLE.backgroundColor}
          foregroundColor={LOADER_STYLE.foregroundColor}
          backgroundOpacity={LOADER_STYLE.backgroundOpacity}
          foregroundOpacity={LOADER_STYLE.foregroundOpacity}
          speed={speed}
          animate
        />
      </div>

      <RectangleSkeleton
        className="rectangle-loader-2"
        height="46"
        width="348"
        backgroundColor={LOADER_STYLE.backgroundColor}
        foregroundColor={LOADER_STYLE.foregroundColor}
        backgroundOpacity={LOADER_STYLE.backgroundOpacity}
        foregroundOpacity={LOADER_STYLE.foregroundOpacity}
        speed={speed}
        animate
      />
    </div>
  );

  // const secondComponent = (
  //   <div>
  //     <RectangleSkeleton
  //       height="20"
  //       width="101"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //     <RectangleSkeleton
  //       className="rectangle-loader-2"
  //       height="32"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //   </div>
  // );
  // const thirdComponent = (
  //   <div>
  //     <RectangleSkeleton
  //       height="20"
  //       width="138"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //     <RectangleSkeleton
  //       className="rectangle-loader-2"
  //       height="32"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //   </div>
  // );

  // const checkboxComponent = (
  //   <div className="rectangle-loader_checkbox">
  //     <RectangleSkeleton
  //       height="16"
  //       width="16"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //     <RectangleSkeleton
  //       height="22"
  //       width="101"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //   </div>
  // );
  // const secondCheckboxComponent = (
  //   <div className="rectangle-loader_checkbox">
  //     <RectangleSkeleton
  //       height="16"
  //       width="16"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //     <RectangleSkeleton
  //       height="20"
  //       width="70"
  //       backgroundColor={LOADER_STYLE.backgroundColor}
  //       foregroundColor={LOADER_STYLE.foregroundColor}
  //       backgroundOpacity={LOADER_STYLE.backgroundOpacity}
  //       foregroundOpacity={LOADER_STYLE.foregroundOpacity}
  //       speed={speed}
  //       animate
  //     />
  //   </div>
  // );
  const buttonsComponent = (
    <div className="rectangle-loader_buttons">
      <RectangleSkeleton
        height="32"
        backgroundColor={LOADER_STYLE.backgroundColor}
        foregroundColor={LOADER_STYLE.foregroundColor}
        backgroundOpacity={LOADER_STYLE.backgroundOpacity}
        foregroundOpacity={LOADER_STYLE.foregroundOpacity}
        speed={speed}
        animate
      />
      <RectangleSkeleton
        height="32"
        backgroundColor={LOADER_STYLE.backgroundColor}
        foregroundColor={LOADER_STYLE.foregroundColor}
        backgroundOpacity={LOADER_STYLE.backgroundOpacity}
        foregroundOpacity={LOADER_STYLE.foregroundOpacity}
        speed={speed}
        animate
      />
    </div>
  );
  return (
    <StyledSMTPContent>
      <RectangleSkeleton
        className="rectangle-loader_title"
        height="22"
        width="128"
        backgroundColor={LOADER_STYLE.backgroundColor}
        foregroundColor={LOADER_STYLE.foregroundColor}
        backgroundOpacity={LOADER_STYLE.backgroundOpacity}
        foregroundOpacity={LOADER_STYLE.foregroundOpacity}
        speed={speed}
        animate
      />

      <RectangleSkeleton
        className="rectangle-loader_description"
        height="40"
        backgroundColor={LOADER_STYLE.backgroundColor}
        foregroundColor={LOADER_STYLE.foregroundColor}
        backgroundOpacity={LOADER_STYLE.backgroundOpacity}
        foregroundOpacity={LOADER_STYLE.foregroundOpacity}
        speed={speed}
        animate
      />

      {firstComponent}
      {firstComponent}
      {firstComponent}

      {buttonsComponent}
    </StyledSMTPContent>
  );
};