Content Appears Before Loader and CSS Loading on SharePoint Server 2019 Website

Question

We have encountered an unusual glitch on our SharePoint Server 2019 website, where the content is rendering before the loader and CSS styles are fully loaded. This issue is impacting the user experience, as it leads to a momentary display of unstyled content, causing a visually disruptive experience for our users.

1. Content Display Before Loader: Upon navigating to our SharePoint site, users are briefly presented with unstyled content before the loader is triggered.
2. CSS Loading Delay: It appears that there is a delay in loading the CSS stylesheets, contributing to the unstyled presentation of the content during the initial page load.

See below for site glitch

CSS calling on the Website

public async onInit(): Promise<void> {
await this.getCustomStyleCSS();
} 

public async getCustomStyleCSS() {
        let data = await this.GetCall(
            siteUrl  + "/CustomStyleLibrary/BootstrapAndJS/css/Style.css"
        );
        if (data.length > 0) {
            customStyleCss = data;
        }
    }

Here's the used code for the loader.

import * as $ from 'jquery';
$(".spAppAndPropertyPanelContainer").css("display", "none");
$("#SuiteNavPlaceHolder").css("opacity", "0");
const loaderDiv = document.createElement("div");
loaderDiv.className= "amaf-loading";
document.body.appendChild(loaderDiv);

let amafLoader = setInterval(() => {
     if ($('.custom-style-css-class').length == 0) {
          $("#SuiteNavPlaceHolder").css("opacity", "0");
          $(".spAppAndPropertyPanelContainer").css("display", "none");
     } else {
          $("#SuiteNavPlaceHolder").css("opacity", "1");
          $(".spAppAndPropertyPanelContainer").css("display", "flex");
          $('.amaf-loading').remove();
          clearInterval(amafLoader);
     }
}, 500);

Thanks in Advance to solving issue.