score:3
if you want to code by yourself, here is a tutorial to teach you how to achieve it. main point is to create 2 layers, below layer is to create css3 animation effect, up layer is to show the content image you want.
here is the tutorial, code and explaination included. (it is in chinese, use google translate) https://www.jianshu.com/p/bd1d24e1ab9e
if you want to use plugin, here is one most used.
https://www.npmjs.com/package/react-content-loader
where to put loading effect: if you want to use loading effect for partial in a component, it should be put where you are using ajax/axios. 1) add loading effect before calling ajax. 2) remove loading effect after ajax success or error. if you want to use loading effect for whole component, you can put in the root of the component, and then set loading as false after data reach. for example
class component extends component {
constructor(props) {
super(props);
this.state = {
loading: true
};
}
componentdidmount() {
axios.get('xxxx')
.then(function (response) {
//success
this.setstate({
loading: false
})
})
}
render() {
return (
<div>
{
this.state.loading
? <div loading />
: <div>page content</div>
}
</div>
)
}
}
score:0
i think you can use some div
and fill with gray color in
componentdidmount()
. then make ajax
request and replace the div
with the real contents
score:0
if you really want to do the implementation using css and react component writing you can get an idea from here : https://www.leejamesrobinson.com/blog/loading-placeholder-with-sass/
but there are so many libraries to help you with content loading such as :
react content loader: https://github.com/danilowoz/react-content-loader react place holder: https://github.com/buildo/react-placeholder
hope this will help you.
Source: stackoverflow.com
Related Query
- Content loading placeholder animation in React
- React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)
- React Modal Does Not Close In Between Loading Content
- How to show loading animation between React Router components
- loading lottie-web animation in react issue
- "WebExtension::executeScript: content script injected VM149:1" in Chrome loading React app
- Loading local JSON file in React for dynamic content
- React Component Open and Collapse Animation with dynamic content
- React Spinner Loading Animation / View without State?
- Create a loading animation that works in react
- Page content is not loading after redirect - React web app
- React Amchart - How to remove animation when loading charts
- React Mixed content error while loading bundle.js (Http/ Https)
- Blocked UI state / Showing a loading animation in React
- What is the best way to create a Loading Animation for React JS Ajax calls?
- React display loading animation for api call duration
- Added react-snap to a react project and unlinked pages and 404 are not loading with correct content
- Dynamic content not loading in React class that is extending component
- React Symfony assets Blocked loading mixed active content
- Loading a Lottie animation with images in React
- How to call loading function with React useEffect only once
- React - Display loading screen while DOM is rendering?
- How to show a loading indicator in React Redux app while fetching the data?
- loading json data from local file into React JS
- How to set iframe content of a react component
- react dev tools not loading in Chrome browser
- How to avoid React loading twice with Webpack when developing
- Set loading state before and after an action in a React class component
- Render Content Dynamically from an array map function in React Native
- Handling scroll Animation in React
More Query from same tag
- React onClick state is not toggling back
- Confused with destructuring assignment within JSX syntax
- Page tries to render before data is loaded from API - React
- How to limit the number of selected check-boxes in React JS?
- NextJS Dynamic Routing, re-render specific Child Components
- How to correctly use page components without GraphQL
- Unable to use material-ui-pickers in React js web application
- React Button Click Event Not working correctly
- How to get json objects to separate arrays React
- How to make Mongoose query case insensitive?
- Using React hooks in an external API service layer
- Django Rest Framework + React rest hooks CORS error
- Reactjs function is not working as it is supposed to be
- Jest test throws "Cannot read property 'prototype' of undefined" when tested action returns a call to fetch
- handleScroll value inside React Component
- Creating a text highlight in the background using javascript at give start and end indexes
- How to remove a object from an array in react hook
- Bind in ReactJS?
- How to precompile scss to a single css file in webpack?
- Throwing "unexpected token" error, when i use jsop api in reactjs?
- Reactjs and redux - How to prevent excessive api calls from a live-search component?
- How to show only some of the checkbox items from the many lists?
- How to get JSON data of console.log inside function and apply it?
- How can I use the same React app in multiple locations of the same page?
- react hooks axios call failing to load grid
- Webpack 5 module federation missing chunk when dynamically loading remote module
- Can touch out side a View Component be detected in react native?
- React re-render restarting video
- Dynamically Set Type of Prop Based on Another Prop
- How can I resolve this pdf-generator problem?