Gatsby 1 Class Component

103
January 01, 2020, at 1:30 PM

I'm trying to understand the logic of this component called AppMounted in a layout (Gatsby 1)

import { Component } from 'react';
export default class AppMounted extends Component {
  componentDidMount() {
    /* eslint-disable no-undef */
    // If the body element does not yet contain the "app-mounted" class
    if (!document.body.classList.contains('app-mounted')) {
      // Wait just a little longer
      setTimeout(() => {
        // And then add it
        document.body.classList.add('app-mounted');
      }, 50);
    }
    /* eslint-enable no-undef */
    // 50
  }
  render() {
    return null;
  }
}

and then scss style for body

body {
    visibility: hidden;
        &.app-mounted {
            visibility: visible;
       }
}

From my understanding is that this wait for all 50ms for the components/data to load then display them. But without this component everything also works perfectly. The problem is it is causing trouble on Gastby 2 and hides everthing. By taking it out on the Gastby 2 version, everything works again. Is there any reason why one would need to hide the body and then display it again?

Any feedback would be appreciated, thank you!

READ ALSO
Responsive Menu with Semantic UI React

Responsive Menu with Semantic UI React

With Semantic UI React I'm having trouble in creating a responsive navigation menu

125
How prevent multiple login with same login credentials in jwt authentication WordPress?

How prevent multiple login with same login credentials in jwt authentication WordPress?

What to do when authentication done for outside the wp environment eg Android or desktop app

88
S3 stream wrapper directory listing. Script is failing without making it past this point. Cant find out why

S3 stream wrapper directory listing. Script is failing without making it past this point. Cant find out why

Trying to understand why my previously tested and working code is failing when trying to test in another dev location(virtual test machine to physical test machine)Using PHP stream wrapper library and AWS PHP SDK to do directory listing and move each file name into an array being modified

77
Is using “not in” faster than using “in” in Python3?

Is using “not in” faster than using “in” in Python3?

Let's say we're solving a simple word count problemThere's a list and we're trying to find the word count of each word occurring in the list

74