Loading

Used as a placeholder for a component while a query is fetched

Getting Started

React supports the usage of placeholders in components, especially useful in SPA with lazy loading, where apps are being rendered only when the user accesses a path or screen. Uncodie will create a Loading placeholder every time a query is being fetched.

Overview

Use the loading component to facilitate the usage of loading placeholders, the lading component is 100% compatible with Uncodie Figma to Code animations and transitions, so you can create a general loading UI for your app or select individual loading placeholders for each query and screen in your app.

Requirements

1. You need to set a query to a component to get a loading behavior from Uncodie

2. You need to create a component of that Node or element to select the component as a target

Use Cases

Set a general loading page

Use the loading component, to personalize the loading component created by Uncodie that is shown every time a component is fetching its data on a query.

Setup

1. Bind your desired values to a component with the Uncodie Plugin

2. Create your placeholder design

3. Optionally create an animation for your placeholder

4. Select your placeholder and set a Loading component as the type

5. Leave the target unset to replace all loaders in your app with your placeholder design

6. Compile and publish your project

Set a personalized placeholder for a component loading state

Use the loading component to animate the data fetch for a table, or feed, and improve the UX and layout of your app.

Setup

1. Bind your desired values to a component with the Uncodie Plugin

2. Create your placeholder design

3. Optionally create an animation for your placeholder

4. Select your placeholder and setup a Loading component as the type

5. Select the target component for your placeholder

6. Compile and publish your project