For my web site, when a button is clicked, the screen blurs. I am now trying to add a loading animation of a spinning circle on top of that blur when the button is pressed, however, I'm running into a lot of issues. When I tried to also have the button click have "isActive" and then make the loader class div when it isActive, the entire web site crashed.

js file code:

import React from "react";
import "./App.scss";

class App extends React.Component {

    state = { fadingOut: false }
    fadeOut = () => this.setState({fadingOut: true});
    

    render() {
        return (
            
 

                


                

                    .datapoems
                

                
                       
                

                

                    
Poem Theme
                    
Detector
                    
                    Enter
                    
                    
                
            
        );
    }
}

export default App;

scss loader code:

 .loader {
                border: 16px solid #f3f3f3;
                border-radius: 50%;
                border-top: 16px solid blue;
                border-bottom: 16px solid blue;
                width: 120px;
                height: 120px;
                -webkit-animation: spin 2s linear infinite;
                animation: spin 2s linear infinite;
              }
              
              @-webkit-keyframes spin {
                0% { -webkit-transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); }
              }
              
              @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
              }