import { h } from "@stencil/core";
import { createStyleSheet } from "../../../styling/JSS";
const style = {
  Container: {
    display: "flex",
    flexDirection: "column",
    gap: "35px",
  },
  HeaderContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "10px",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const LoadingView = () => {
  return (h("div", { class: sheet.classes.Container },
    h("style", { type: "text/css" }, styleString),
    h("sqm-skeleton", { width: "45%", height: "40px !important" }),
    h("div", { class: sheet.classes.HeaderContainer },
      h("sqm-skeleton", { width: "15%" }),
      h("sqm-skeleton", { width: "25%", height: "30px !important" })),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "75%", height: "35px" }),
    h("sqm-skeleton", { width: "15%" }),
    h("sqm-skeleton", { width: "80px", height: "30px !important" })));
};
export default LoadingView;
