score:3

Accepted answer

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.

logic explaination

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.


Related Query

More Query from same tag