Pageloader for slow module connections

[M.Meesters]

We suffer from a slow response from a registrar when we want to request information such as the status of the DNS, EPPcode, etc.

This sometimes takes up to 10 seconds.

From a technical point of view, nothing goes wrong, because the information will eventually come. From the user's point of view it is unusable, because it then seems that the site no longer works.

To overcome this problem, we want to use a page loader that informs the customer while waiting that we are retrieving the information.

There are many solutions to come up with, but I can't get this right. I only want to provide those slow pages with a page loader and not the entire site.

I use

<div id="loader"></div> to activate the page loader

some css code

.loader{
   position: fixed;
   apex: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   display: flexible;
   align items: center;
   justify-content: center;
   background: #333333;
   transition: opacity 0.75s, visibility 0.75s;
}

.loader--hidden {
   opacity: 0;
   visibility: hidden;
}

.loader::after {
   contents: "";
   width: 75px;
   height: 75px;
   border: 15px solid #dddddd;
   border-top-color: #009578;
   border radius: 50%;
   animation: loading 0.75s ease infinite;
}

@keyframes loading {
   from {
     transform: rotate(0turn);
   }
   to {
     transform: rotate(1turn);
   }
}

an event to stop the loader

window.addEventListener("load", () => {
   const loader = document.querySelector(".loader");

   loader.classList.add("loader--hidden");

   loader.addEventListener("transitionend", () => {
     document.body.removeChild(loader);
   });
});

I get several results but not the correct one.
Suggestions are welcome.