Loading symbol while Json parsed-CodePudding

How I can I go about adding loading symbol in index.js while Json is being parsed.

razor page:

<div id="container"></div>   @*Where data is going to be displayed*@

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("Create", data);    @*invokes JS method*@

}

index.js:

function create(data){

     // loading show start here
     $.getJSON(FN, function (data1) {
            ....
     });
     //Should end here

 }

CodePudding user response：

Add the loading spinner markup (HTML) and start it off hidden.

When create function is invoked, display the spinner and finally when getJSON callback is invoked, hide the spinner.

(Don't mind the dummy js, it is just there for this example snippet to work, and you should focus on the loading element in the create function)

// Javascript


// Dummy
const $ = {
  getJSON(fn, callback) {
    setTimeout(() => callback(fn   " to put on screen"), 3000);
  }
}
const fn = "Something";
create();
// Dummy

function create(data) {

  // loading show start here
  loading.classList.remove("hidden");

  $.getJSON(fn, function(data1) {
    //Should end here
    loading.classList.add("hidden");

    // Set text inside the container div
    container.textContent = data1;

    // ....
  });

}

/* CSS */

.loading {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading svg {
  width: 80px;
  margin-bottom: 20px;
  fill: lightsteelblue;
  animation: rotate 1s linear infinite;
}

.hidden {
  display: none;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

<!-- HTML -->

<div id="container"></div>
<div id="loading" >
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"></path></svg> Just running for 3 seconds
</div>