_dataset: Put a spinner when downloading data until the file is ready to be put in the drive.

[nathcast]

When click on download a dataset, there could be a very long lag before the window to save teh file props up This could be disconcerting and the page needs to offer a spinner and disable page until the other bit comes up/

Solution: once the button is clilcked, set a spinner modal to visible. When the event of the file updoad thing is on, then set the modal to not visible.

.myModal {

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.myModal .centered{

  margin: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

[11:41] Alberto Stella
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #fed316;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

<div class="container-fluid myModal" *ngIf="loading">

  <div class="row centered">

    <div class="row justify-content-center">

      <div class="loader "></div>

    </div>

    <div class="row">

      <div class="text-center">

        <p style="font-weight: bold; color: white;">Loading...</p>

      </div>

    </div>

  </div>

</div>

[nathcast]

I got a spinner, and trying to follow this idea: https://stackoverflow.com/questions/5757801/javascript-how-to-show-spinner-until-file-downloads

Added a modal at bottom of _dataset and also a bit of JS and onclick function.

I am gettting to something here:

'''

'''

[nathcast]

Ok:

When download, the onload event is added to the boddy tag that load shows teh spinner. It has a timer. Give enough time to hopefully let people know that something is happening and that their ownload is comming.

To test. N

[nathcast]

Hi, PLease test this and let me know if that is acceptable behaviour. To test: go on a dataset page and try Download (try a heavy download like a frictionless dataset on http://local-info.rothamsted.ac.uk/eRA/era2018-new/experiment/rbk1#datasets Thanks,

[mglendining]

Hi I have tested this, and it works well. Good idea. M

From: Nathalie Castells-Brooke @.> Sent: 03 August 2022 16:40 To: Rothamsted-Ecoinformatics/eRA @.> Cc: Margaret Glendining @.>; Assign @.> Subject: Re: [Rothamsted-Ecoinformatics/eRA] _dataset: Put a spinner when downloading data until the file is ready to be put in the drive. (Issue #85)

CAUTION: This email originated from outside of the organisation. Do not click links or open attachments unless you recognise the sender and know the content is safe.

Hi, PLease test this and let me know if that is acceptable behaviour. To test: go on a dataset page and try Download (try a heavy download like a frictionless dataset on http://local-info.rothamsted.ac.uk/eRA/era2018-new/experiment/rbk1#datasetshttps://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flocal-info.rothamsted.ac.uk%2FeRA%2Fera2018-new%2Fexperiment%2Frbk1%23datasets&data=05%7C01%7Cmargaret.glendining%40rothamsted.ac.uk%7Cb2722c37e74a4ebef4de08da756674dd%7Cb688362589414342b0e37b8cc8392f64%7C1%7C0%7C637951380146656543%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=gKTjSu%2FwrSh6tklT00%2FFzGbsI0rVNC21Htp7KW3Riv0%3D&reserved=0 Thanks,

- Reply to this email directly, view it on GitHubhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FRothamsted-Ecoinformatics%2FeRA%2Fissues%2F85%23issuecomment-1204124079&data=05%7C01%7Cmargaret.glendining%40rothamsted.ac.uk%7Cb2722c37e74a4ebef4de08da756674dd%7Cb688362589414342b0e37b8cc8392f64%7C1%7C0%7C637951380146656543%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=a20jOKwPTwM1yzYs73dGrzhgdqdkrZC1MEGrNXyRCEA%3D&reserved=0, or unsubscribehttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAPJX2VJYI34N6EB2462K76TVXKHFZANCNFSM52VY6MGA&data=05%7C01%7Cmargaret.glendining%40rothamsted.ac.uk%7Cb2722c37e74a4ebef4de08da756674dd%7Cb688362589414342b0e37b8cc8392f64%7C1%7C0%7C637951380146656543%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=qk2FnkDe%2ByVljVSt3%2Bld2S4jxapFgq4B0UVlonEYl18%3D&reserved=0. You are receiving this because you were assigned.Message ID: @.**@.>>

Rothamsted Research is a company limited by guarantee, registered in England at Harpenden, Hertfordshire, AL5 2JQ under the registration number 2393175 and a not for profit charity number 802038.

[richardostler]

Looks good to me