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]

---

---

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

• How do I compose an effective node title?
• How do I post a question effectively?
• Markup in the Monastery

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		&
	<		&lt;
	>		&gt;
	[		&#91;
	]		&#93;

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.