Hi, I've got a Mojo app that runs some code in the background, taking roughly 60 seconds to complete. It's a simple app that has a "get" endpoint for "/" to display a form with a submit button that does a "post" to "/" where the sub routine does the stuff taking the 60 seconds before rendering a results template.

Is there a way to show a user a loading animation for those 60 seconds (without hardcoding the duration) while the data is collected before then presenting the results screen? I've seen loaders in JS or CSS but I'm not quite sure how to invoke them, since if I include them in the result template, Mojo will do the data collection before rendering the HTML in the results template. Could someone help explain how to make it so after hitting the form submit button, a loading animation is instantly rendered, and then when the data collection is done, the results template is rendered and the user forwarded? Thanks in advance!

get '/' => sub {
  my $c = shift;
  $c->render( template => 'index' );
};

post '/' => sub {
  my $c = shift;
  my ($opt) = $c->param('option');
  app->log->info("Option $opt");
  my $result = do_something($opt);
  $c->render( template => 'result', c => $result );
};
[download]

@@ index.html.ep

%layout 'default';
<form method="post" action="." enctype="multipart/form-data">
<input name="option" size="40" type="text"></input><br>
<br><input type="submit" name="submit" value="submit"><br>
</form>
[download]

@@ result.html.ep
%layout 'default';
<div id="loader"></div>
<div id="content">
<h2>Result</h2>
<pre>
<%= $c %>
</pre>
</div>
[download]