Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,79 @@
+"use client";
+/*
+ * Documentation:
+ * Loading Indicator Skeleton — https://app.subframe.com/f023064a5ca0/library?component=Loading+Indicator+Skeleton_08dee637-2ba5-4c5d-86d4-a531fd11481f
+ */
+
+import React from "react";
+import * as SubframeUtils from "../../utils";
+
+export interface LoadingIndicatorSkeletonRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "card" | "list";
+  className?: string;
+}
+
+const LoadingIndicatorSkeletonRoot = React.forwardRef<
+  HTMLDivElement,
+  LoadingIndicatorSkeletonRootProps
+>(function LoadingIndicatorSkeletonRoot(
+  {
+    variant = "card",
+    className,
+    ...otherProps
+  }: LoadingIndicatorSkeletonRootProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "group/08dee637 flex w-full items-start rounded-[8px] border border-solid border-[#e7e7e7] bg-surface-neutral-primary px-6 py-6 group/mtskeleton",
+        { "border border-solid border-border-default": variant === "list" },
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      <div
+        className={SubframeUtils.twClassNames(
+          "flex grow shrink-0 basis-0 flex-col items-start gap-4",
+          { hidden: variant === "list" }
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 flex-none items-start rounded-[9999px] bg-surface-neutral-tertiary animate-pulse" />
+          <div className="flex min-w-[0px] flex-col items-start gap-2 flex-1">
+            <div className="flex h-3 flex-none items-start rounded-[4px] bg-[#e7e7e7] w-1/2 animate-pulse" />
+            <div className="flex h-3 flex-none items-start rounded-[4px] bg-[#e7e7e7] w-1/3 animate-pulse" />
+          </div>
+        </div>
+        <div className="flex h-32 w-full flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
+        <div className="flex h-3 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary w-1/3 animate-pulse" />
+      </div>
+      <div
+        className={SubframeUtils.twClassNames(
+          "hidden min-w-[0px] grow shrink-0 basis-0 flex-col items-start",
+          { flex: variant === "list" }
+        )}
+      >
+        <div className="flex w-full items-start gap-3 pb-4">
+          <div className="flex h-8 w-8 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
+          <div className="flex min-w-[0px] flex-col items-start gap-2 flex-1">
+            <div className="flex h-20 w-full flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
+            <div className="flex h-3 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary w-1/2 animate-pulse" />
+          </div>
+        </div>
+        <div className="flex w-full items-center gap-3 border-t border-solid border-[#e7e7e7] py-4">
+          <div className="flex h-8 w-8 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
+          <div className="flex h-3 min-w-[0px] items-start rounded-[4px] bg-surface-neutral-tertiary flex-1 animate-pulse" />
+        </div>
+        <div className="flex w-full items-center gap-3 border-t border-solid border-[#e7e7e7] py-4">
+          <div className="flex h-8 w-8 flex-none items-start rounded-[4px] bg-surface-neutral-disabled animate-pulse" />
+          <div className="flex h-3 min-w-[0px] items-start rounded-[4px] bg-surface-neutral-tertiary flex-1 animate-pulse" />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const LoadingIndicatorSkeleton = LoadingIndicatorSkeletonRoot;
@@ -0,0 +1,10 @@
+"use client";
+import { LoadingIndicatorSkeleton as LoadingIndicatorSkeletonComponent } from "./LoadingIndicatorSkeleton";
+
+/**
+ * Add wrapper components and business logic here.
+ * If you modify this file, disable Subframe sync for it to prevent overwrites.
+ * Learn more: https://docs.subframe.com/concepts/syncing-components#wrapping-components
+ */
+
+export const LoadingIndicatorSkeleton = LoadingIndicatorSkeletonComponent;