Chakra UI Feedback Skeleton

Chakra UI library has various attractive UI components, of which one of the useful components is Skeleton. The primary use of this component is when we want to show some data to the user but to make the interaction more with the user, we represent the loading state of the application in terms of the data skeleton. This engages the user in the application until the desired data is loaded. In this article, we will see the practical demonstration of Feedback Skeleton with proper examples.

Prerequisites:

• NPM & Node.js
• React JS
• HTML, CSS and JavaScript
• React JS Chakra UI

Approach:

We have created forms of Feedback Skeletons like Stack of skeletons, Wrapped Content with Skeleton, Card Component with Skeleton, Circle and Text Skeleton, Change Skeleton colour, Skip Skeleton when content is loaded, and Fade Duration with isLoaded. We have also created a button, which shows the behaviour when the data is loaded and how the Skeleton reacts to this behaviour.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app my-app

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd my-app

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file.

"dependencies": {
      "@chakra-ui/react": "^2.8.2",
      "@emotion/react": "^11.11.3",
      "@emotion/styled": "^11.11.0",
      "@testing-library/jest-dom": "^5.17.0",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "framer-motion": "^6.5.1",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-scripts": "5.0.1",
      "web-vitals": "^2.1.4"
}

Example: Below is the practical implementation of the Chakra UI Feedback Skeleton

Javascript

// App.js

import React, { useState } from 'react';
import {
    ChakraProvider, Box, Stack, Skeleton,
    SkeletonCircle, SkeletonText, Button,
    Heading
} from '@chakra-ui/react';
const useRemoteData = () => {
    const loading = true;
    const data = { title: 'GFG' };
    const error = false;
    return { data, loading, error };
};
function App() {
    const [is_Loaded, set_is_Loaded] = useState(false);
    const { data, loading, error } = useRemoteData();
    return (
        <ChakraProvider>
            <Box p={4} textAlign="center"
                maxW="600px" m="auto">
                <Heading as="h1" size="xl"
                    mb={2} color="green.500">
                    GeeksforGeeks
                </Heading>
                <Heading as="h3" size="md" mb={4}>
                    Chakra UI Feedback Skeleton
                </Heading>
                <Box mb={6}>
                    <Heading as="h2" size="md" mb={2}>
                        Stack of Skeletons
                    </Heading>
                    <Stack spacing={2}>
                        <Skeleton height="20px"
                            isLoaded={is_Loaded} />
                        <Skeleton height="20px"
                            isLoaded={is_Loaded} />
                        <Skeleton height="20px"
                            isLoaded={is_Loaded} />
                    </Stack>
                </Box>
                <Box fontSize="lg" mt={6}>
                    <Heading as="h2" size="md" mb={2}>
                        Wrapped Content with Skeleton
                    </Heading>
                    <Skeleton isLoaded={is_Loaded}>
                        <Box>
                            <div>Contents wrapped</div>
                            <div>Won't be visible</div>
                        </Box>
                    </Skeleton>
                </Box>
                <Box mt={6}>
                    <Heading as="h2" size="md" mb={2}>
                        Card Component with Skeleton
                    </Heading>
                    {error ? (
                        <Box color="red.500" fontSize="lg"
                            fontWeight="bold">
                            Error
                        </Box>
                    ) : (
                        <Box>
                            <Skeleton isLoaded={!loading}>
                                <Box fontSize="xl"
                                    fontWeight="bold">
                                    {data.title}
                                </Box>
                            </Skeleton>
                        </Box>
                    )}
                </Box>
                <Box mt={6} p={4} boxShadow="lg" bg="white">
                    <Heading as="h2" size="md" mb={2}>
                        Circle and Text Skeleton
                    </Heading>
                    <SkeletonCircle size="10"
                        isLoaded={is_Loaded} />
                    <SkeletonText mt="4" noOfLines={4}
                        spacing="4" skeletonHeight="2"
                        isLoaded={is_Loaded} />
                </Box>
                <Box mt={6}>
                    <Heading as="h2" size="md" mb={2}>
                        Change Skeleton color
                    </Heading>
                    <Skeleton startColor="pink.500"
                        endColor="orange.500"
                        height="20px" isLoaded={is_Loaded} />
                </Box>
                <Box mt={6}>
                    <Heading as="h2" size="md" mb={2}>
                        Skip Skeleton when content is loaded
                    </Heading>
                    <Skeleton isLoaded={is_Loaded}>
                        <span>Chakra UI is cool</span>
                    </Skeleton>
                </Box>
                <Stack spacing={4} mt={6}>
                    <Heading as="h2" size="md" mb={2}>
                        Fade Duration with isLoaded
                    </Heading>
                    <Skeleton height="40px" isLoaded={is_Loaded}>
                        <Box fontSize="lg" fontWeight="bold">
                            Hello GeeksforGeeks!
                        </Box>
                    </Skeleton>
                    <Skeleton
                        height="40px"
                        isLoaded={is_Loaded}
                        bg="green.500"
                        color="white"
                        fadeDuration={1}
                    >
                        <Box fontSize="lg" fontWeight="bold">
                            Hello React!
                        </Box>
                    </Skeleton>
                    <Skeleton
                        height="40px"
                        isLoaded={is_Loaded}
                        fadeDuration={4}
                        bg="blue.500"
                        color="white"
                    >
                        <Box fontSize="lg" fontWeight="bold">
                            Hello GFG!
                        </Box>
                    </Skeleton>
                </Stack>
                <Box mt={6} textAlign="center">
                    <Button onClick={
                        () => set_is_Loaded((v) => !v)
                    }>
                        Toggle Skeleton
                    </Button>
                </Box>
            </Box>
        </ChakraProvider>
    );
}
export default App;

Step to run the application:

npm start 

Output: Now go to http://localhost:3000 in your browser: