CSS Loader + React JS implementation

index.js

import React, { Component } from 'react';
import api from '../../services/api';
import './styles.css';
import './loader.css';

export default class TodoItem extends Component {

    state = {
        todoitem: {},
        loading: true,
    }

    async componentDidMount() {
        const { id } = this.props.match.params;

        const response = await api.get(`/todoitems/${id}`);
        this.setState({ todoitem: response.data });
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.todoitem !== prevState.todoitem) {
            this.setState({ loading: false });
        }
    }

    render() {
        const { todoitem } = this.state;
        return (
            this.state.loading ?
                <div className={`loader ${this.state.loading ? 'active' : ''}`} />
                :
                <div className="todoitem-info">
                    <h1> {todoitem.title} </h1>
                    <p>{todoitem.description}</p>
                </div>
        )
    }
}

loader.css

:root {
    /* You can change here */
    --loader-color:  #da552f;
    --loader-size: 8rem;
    --loader-width: 12px;
    --loader-duration: 2s;
}

/* loader */
.loader.active {
    z-index: 999;
    width: var(--loader-size);
    height: var(--loader-size);
    position: relative;
    top: calc(50vh - var(--loader-size)/2 );
    left: calc(50vw - var(--loader-size)/2);
    border: var(--loader-width) solid #f3f3f3;
    border-top: var(--loader-width) solid var(--loader-color);
    border-radius: 50%;
    animation: spin var(--loader-duration) linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}