React MUI Skeleton Feedback

Last Updated : 07 Dec, 2022

React Material UI is an open-source library for the React User Interface components that implement Google’s Material Design. It provides a wide range collection of prebuilt, reusable, responsive components which requires less coding and are ready to use for production implementation. It includes beautifully designed components that can be easily customized according to the user’s needs and requirements.

Skeleton Feedback is a component provided by Material UI to preview or display animated placeholders for the time being data gets loaded or the response is ready to display on the user’s screen. Instead of showing no message, or a blank screen it is one of the ways to reduce the waiting time and to let the user know about the loading state.

Skeleton Feedback Variants: The Skeleton Feedback component supports four shape variants:

text: It is the default skeleton variant, representing a loading preview in a single text line.
circular: This loading preview is in a circular shape, and its radius can be adjusted.
rectangular: This loading preview is rectangular in shape.
rounded: This loading preview is in a rectangular rounded shape. Using border-radius you can easily adjust the size.

Skeleton Feedback Animations: The Skeleton Feedback component supports three animation types:

pulsates: It is the default animation for loading the preview state.
wave: It is animation in the form of a continuous wave.
disable: It is used to completely disable the animation on Skeleton Feedback.

Syntax:

<Skeleton variant="rectangular" width={210} height={118} />

Setting up React.js application:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move into that directory using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/icons-material

Project Structure: The project structure will look like this:

Example 1: In this example, We will use the Skeleton component with “pulse” animation.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState, useEffect } from "react"; 
import Skeleton from '@mui/material/Skeleton'; 
import Box from '@mui/material/Box'; 
  
const App = () => { 
  
    return ( 
        <div style={{ textAlign: "center", marginTop: "50px" }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h2>React MUI Skeleton Feedback</h2> 
            <Box sx={{ display: 'flex', justifyContent: 'center' }}> 
                <Skeleton variant="rectangular"
                    animation={"pulse"} width={500} 
                    height={250} /> 
            </Box> 
        </div> 
    ); 
}; 
  
export default App;

Step to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example, We will use the Skeleton component with “wave” animation. and “text” variant.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState, useEffect } from "react"; 
import Skeleton from '@mui/material/Skeleton'; 
import Box from '@mui/material/Box'; 
import Typography from '@mui/material/Typography'; 
  
const App = () => { 
  
    return ( 
        <div style={{ textAlign: "center", marginTop: "50px" }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3>React MUI Skeleton Feedback</h3> 
            <Box sx={{ justifyContent: 'center', display: 'flex' }}> 
                <Typography variant="h4"> 
                    <Skeleton animation="wave" variant="text"
                        width="300px" /> 
                </Typography> 
            </Box> 
        </div> 
    ); 
}; 
  
export default App;