React loader's state doesn't change

Question

I am trying to implement a loading spinner into my React app, but I have a problem with changing its state. It is supposed to appear when the data to display is being downloaded through Axios (once the function getProjectDetails gets the data, see componentDidMount) and then disappear. But right now it's just spinning forever. What am I doing wrong?

export function StyledTabs(props) {
    const [value, setValue] = React.useState(0);
    const [loading, setLoading] = useState(true);
    


    const handleChange = (event, newValue) => {
        console.log(props)
        setValue(newValue);
    };

    function tabProps(index) {
        return {
            id: `vertical-tab-${index}`,
            'aria-controls': `vertical-tabpanel-${index}`,
        };
    }

    return loading ? <LoadingComponent /> : (
        <div>
            <AppBar position="static" color="transparent">
                <Tabs
                    value={value}
                    onChange={handleChange}
                    variant="scrollable"
                    scrollButtons="on">
                    <Tab label="Project Information" {...tabProps(0)} />
                    <Tab label="Group Procurement Information" {...tabProps(1)} />
                    <Tab label="Other Information" {...tabProps(2)} />
                    <Tab label="Improvement Calculation* (Absolute Number)" {...tabProps(3)} />
                    <Tab label="Project Description" {...tabProps(4)} />
                </Tabs>
              </AppBar>
             </div>

   export default class ProjectDetails extends React.Component {
    state = {  
        projectDetails: {
            additionalEntities: "a5ff008e-eb77-4f4a-9ee7-0d863ffed1ed",
            additionalEntityName: "",
            businessCFO: 0,
            businessController: 0,
            businessOwner: 0,
            categoryName: "Technical Marine (Strategic)",
            contractEndDate: "2021-08-26T00:00:00",
            contractStartDate: "2021-08-26T00:00:00",
            description: "Test Desctription",
            descriptionId: 1,
            ebitda: 0,
            gpCategory: "fb6028e5-4273-4176-8cdb-978de1fd2e99",
            gpSubCategory: "e3a22c6e-6ffa-43e4-867d-0f51e90540e3",
            legalEntity: "4af62e99-abb4-41c5-835e-063a5f4eaa46",
            nameOfSuplier: "string",
            OverallImprovementTypeId: 1,
            overallImprovementTypeName: "OPEX",
            projectId: "351b2f09-d879-4db1-02b1-08d968707193",
            projectName: "Test Project",
            FullProjectNumber: "000.00",
            projectResponsible: 0,
            subCategoryName: "Terminal Equipment",
            valueImprovementTypeId: 1,
            valueImprovementTypeName: "EBIT"
        }
    }

    componentDidMount() {
        this.getProjectDetails();
        this.setState(() => {
          return  {loading: false}
        })
    }

    getProjectDetails() {
        customInstance.get('Project/' + this.id).then((response) => {
            const projectDetails = response.data;
            this.setState((state) => {
                state = response.data;
                this.state.projectDetails = response.data;
                return state;
            });
        });
        console.log(this.state.projectDetails);
    }

Answer 1

componentDidMount is for class components but you are using function component you should use useEffect instead and you should change the state with useState like this : setLoading(false) otherwise the loading will be always true and always spinning. also you dont need "this" in function component