COVID19 LockDown Dev Log – Day 13

What I Worked On

Styling fixes for my portfolio and looking into how to add a loading screen to it.

What I Learned

Adding a loading screen in a Gatsby project has no official way of how to do do it. I guess one can be creative here.

I want to have a loading screen for 2 seconds. Then it should fade out and then display my portfolio page. So far I have made a ‘loading.js’ component that looks like this:

import React, { Component } from "react";


class Loading extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoaded: false
        }
    }

    render() {
        setTimeout(() => {
            this.setState({
                isLoaded: true
            })
            console.log("Timeout 2sec.")
        }, 2000)

        return (
            <div className={`loading has-text-centered`} style={{visibility: `${this.state.isLoaded ? 'hidden' : 'visible'}`, }}>
                <h1 className="title">Loading. . .</h1>
            </div>
        )
    }
}

export default Loading;

It’s working to some extend. So far it displays the <div> element and after 2 seconds it disappears. Although, I noticed in the console.log that after the element has disappeared it still fires the ‘setTimeout’ function. It does so infinetly. I’m still looking for a way to make it fire once only. I’ve been through some Stack Overflow posts with a similar problem, but so far no luck. It might just be me who doesn’t understand how React is treating the state here, because if I remove the ‘setState()’ function it works as intended.

What Distracted Me During The Day

• Phone calls
• Messenger
• Youtube

Resources

• Gatsby issue on adding a “loading screen” – https://github.com/gatsbyjs/gatsby/issues/7658