Skip to main content

Skeleton Loading

React-Forminate provides built-in skeleton loading states to enhance user experience during form loading. This feature prevents layout shifts and provides visual feedback while form fields are being initialized.

Basic Usage​

Default Skeleton Loading​

By default, forms will show a subtle skeleton loading state:

<DynamicForm 
  formId="myForm"
  formData={formData} 
/>

Disabling Skeleton Loading​

To completely disable skeleton loading, set showSkeletonLoading to false:

<DynamicForm
  formId="myForm"
  formData={formData}
  showSkeletonLoading={false}
/>

Customization Options​

Using Custom Skeleton Components​

You can provide your own skeleton component for a more branded loading experience:

const MyCustomSkeleton = () => (
  // use of the tailwindCSS classes
  <div className="animate-pulse space-y-4">
    <div className="h-4 bg-gray-200 rounded w-1/4"></div>
    <div className="h-10 bg-gray-200 rounded"></div>
  </div>
);

<DynamicForm
  formId="myForm"
  formData={formData}
  skeleton={<MyCustomSkeleton />}
/>

Per-Field Customization​

You can also customize skeletons for individual fields:

{
  fieldId: "username",
  type: "text",
  label: "Username",
  skeleton: (
    <div className="my-custom-field-skeleton">
      <div className="skeleton-line"></div>
    </div>
  )
}

Skeleton Loading Props​

PropTypeDescriptionDefault
showSkeletonLoadingbooleanToggles skeleton loading visibilitytrue
skeletonReactNodeCustom skeleton component to useDefault skeleton

Default Skeleton Implementation​

The default skeleton uses react-loading-skeleton with these characteristics:

const DefaultSkeleton = () => (
  <div>
    <Skeleton 
      height={15}
      width="25%"
      style={{ opacity: 0.2, marginTop: "10px" }}
    />
    <Skeleton
      height={40}
      width="100%"
      style={{ opacity: 0.5, marginBottom: "15px" }}
    />
  </div>
)

Complete Examples​

Custom Animated Skeleton​

const PulseSkeleton = () => (
  // Use of the tailwindCSS classes
  <div className="space-y-3">
    <div className="h-4 bg-gradient-to-r from-gray-100 to-gray-300 rounded w-1/3 animate-pulse"></div>
    <div className="h-10 bg-gradient-to-r from-gray-100 to-gray-300 rounded animate-pulse"></div>
  </div>
);

<DynamicForm
  formId="animatedForm"
  formData={formData}
  skeleton={<PulseSkeleton />}
/>

Field-Specific Skeletons​

const formData = {
  formId: "userProfile",
  fields: [
    {
      fieldId: "avatar",
      type: "file",
      label: "Profile Picture",
      skeleton: <AvatarSkeleton /> // Custom avatar skeleton
    },
    {
      fieldId: "bio",
      type: "textarea",
      label: "Biography",
      skeleton: <TextareaSkeleton /> // Custom textarea skeleton
    },
    // Other fields will use default skeleton
    {
      fieldId: "email",
      type: "text",
      label: "Email"
    }
  ]
};

Disabling for Specific Fields​

{
  fieldId: "instantField",
  type: "text",
  label: "Always Visible Field",
  showSkeletonLoading: false
}
Clicky