From d7d418db68bb78d789f03411a0f96ca7c73c8887 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 16 Nov 2023 14:19:28 +0300
Subject: [PATCH] packages/ui: add skeleton for input & checkbox

---
 apps/web/components/Form/Elements.tsx |  1 +
 packages/ui/checkbox.tsx              | 26 +++++++++++++++++---------
 packages/ui/input.tsx                 | 12 ++++++++----
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/web/components/Form/Elements.tsx b/apps/web/components/Form/Elements.tsx
index 2d482c1..55c29ae 100644
--- a/apps/web/components/Form/Elements.tsx
+++ b/apps/web/components/Form/Elements.tsx
@@ -25,6 +25,7 @@ export function Elements({ data, metaData }: Props) {
         return (
           <ElementContainer key={name} id={name} title={fieldType === 'CHECKBOX' ? '' : label}>
             <Element
+              loading={!Object.keys(values).length}
               checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
               id={name}
               value={values[name] || ''}
diff --git a/packages/ui/checkbox.tsx b/packages/ui/checkbox.tsx
index b3a18dd..2668513 100644
--- a/packages/ui/checkbox.tsx
+++ b/packages/ui/checkbox.tsx
@@ -30,15 +30,23 @@ const variants = cva(
 );
 
 export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
-  VariantProps<typeof variants>;
+  VariantProps<typeof variants> & { readonly loading: boolean };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, title, ...props }, ref) => (
-    <div className="flex items-center">
-      <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
-      {title && (
-        <Label intent={props.disabled ? 'disabled' : 'default'} htmlFor={props.id} title={title} />
-      )}
-    </div>
-  )
+  ({ className, loading, title, ...props }, ref) => {
+    if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />;
+
+    return (
+      <div className="flex items-center">
+        <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
+        {title && (
+          <Label
+            intent={props.disabled ? 'disabled' : 'default'}
+            htmlFor={props.id}
+            title={title}
+          />
+        )}
+      </div>
+    );
+  }
 );
diff --git a/packages/ui/input.tsx b/packages/ui/input.tsx
index 49ee7e3..8c9120c 100644
--- a/packages/ui/input.tsx
+++ b/packages/ui/input.tsx
@@ -8,11 +8,15 @@ const variants = cva(
 );
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
-  VariantProps<typeof variants>;
+  VariantProps<typeof variants> & { readonly loading?: boolean };
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  <input ref={ref} type="text" className={cn(variants({ className }))} {...props} />
-));
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, loading, ...props }, ref) => {
+    if (loading) return <div className="h-full w-full animate-pulse rounded bg-gray-100" />;
+
+    return <input ref={ref} type="text" className={cn(variants({ className }))} {...props} />;
+  }
+);
 
 export const InputNumber = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
   <Input ref={ref} type="number" {...props} />