CODEWITHSUNDEEP
javascriptblazor
Sarahrb
Sarahrb

Reputation: 669

Loading symbol while Json parsed

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

 }

Upvotes: 0

Views: 58

Answers (1)

Bqardi
Bqardi

Reputation: 691

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" class="loading hidden">
  <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>

Upvotes: 1

Related Questions