[CL-427] Add skeleton loading components to the CL (#16728)

libs/components/src/skeleton/skeleton.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+/**
+ * Basic skeleton loading component that can be used to represent content that is loading.
+ * Use for layout-level elements and text, not for interactive elements.
+ *
+ * Customize the shape's edges with the `edgeShape` input. Customize the shape's size by
+ * applying classes to the `bit-skeleton` element (i.e. `tw-w-40 tw-h-8`).
+ *
+ * If you're looking to represent lines of text, use the `bit-skeleton-text` helper component.
+ */
+@Component({
+  selector: "bit-skeleton",
+  templateUrl: "./skeleton.component.html",
+  imports: [CommonModule],
+  host: {
+    class: "tw-block",
+  },
+})
+export class SkeletonComponent {
+  /**
+   * The shape of the corners of the skeleton element
+   */
+  readonly edgeShape = input<"box" | "circle">("box");
+}