plane/web/components/project/form-loader.tsx

import { FC } from "react";
// components
import { Loader } from "components/ui";

export interface IProjectDetailsFormLoader {}

export const ProjectDetailsFormLoader: FC<IProjectDetailsFormLoader> = () => (
  <>
    <div className="relative h-44 w-full mt-6">
      <Loader>
        <Loader.Item height="auto" width="46px" />
      </Loader>
      <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
        <div className="flex gap-3 flex-grow truncate">
          <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
            <Loader>
              <Loader.Item height="46px" width="46px" />
            </Loader>
          </div>
        </div>
        <div className="flex justify-center flex-shrink-0">
          <Loader>
            <Loader.Item height="32px" width="108px" />
          </Loader>
        </div>
      </div>
    </div>
    <div className="flex flex-col gap-8 my-8">
      <div className="flex flex-col gap-1">
        <h4 className="text-sm">Project Name</h4>
        <Loader>
          <Loader.Item height="46px" width="100%" />
        </Loader>
      </div>
      <div className="flex flex-col gap-1">
        <h4 className="text-sm">Description</h4>
        <Loader className="w-full">
          <Loader.Item height="102px" width="full" />
        </Loader>
      </div>
      <div className="flex items-center justify-between gap-10 w-full">
        <div className="flex flex-col gap-1 w-1/2">
          <h4 className="text-sm">Identifier</h4>
          <Loader>
            <Loader.Item height="36px" width="100%" />
          </Loader>
        </div>
        <div className="flex flex-col gap-1 w-1/2">
          <h4 className="text-sm">Network</h4>
          <Loader className="w-full">
            <Loader.Item height="46px" width="100%" />
          </Loader>
        </div>
      </div>
      <div className="flex items-center justify-between py-2">
        <Loader className="mt-2 w-full">
          <Loader.Item height="34px" width="100px" />
        </Loader>
      </div>
    </div>
  </>
);