How to fix that the 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.

Content Display Before Loader: Upon navigating to our SharePoint site, users are briefly presented with unstyled content before the loader is triggered. 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. Click for the attached image of glitch on the website

CSS calling code

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 loader code snippet,

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);