CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3apiloading
Richlewis
Richlewis

Reputation: 15374

Show loading icon/gif until results returned from api

I am making a call to an api and the results take about 15-20 seconds to load, so I would like to show a loading gif for example until they load.

i have a simple form that makes the request which then redirects me to the relevant action

<%= form_tag results_path, :method => "get" do %>
<%= text_field_tag 'search', nil, :placeholder => "Enter Email Address here...." %>
<%= submit_tag 'Search' %>

How would I add an image to the results_path until results are rendered?

Can i do this within the form itself or is it a piece of Jquery/Javascript

Thanks

Upvotes: 0

Views: 1867

Answers (3)

Coding active
Coding active

Reputation: 1680

This would disable the button with spinner until the response is received.

<%= button_tag "Search", class: "btn btn-default", 'data-disable-with' => "<i class='fa fa-spinner fa-spin'></i>".html_safe %>

Upvotes: 2

Raed
Raed

Reputation: 258

According to Rails 3: Remote links and Forms, you could do it as such

  • Add :remote => true to your form_tag
  • Add the following to your JS 
$('SEARCH-BUTTON').bind('ajax:loading', function(){
  $('LOADING-GIF').show();
});

$('SEARCH-BUTTON').bind('ajax:complete', function(){
  $('LOADING-GIF').hide();
  // add what you like here
});

I have not tested it, but I think it would do the trick.

Upvotes: 5

Sachin Kadian
Sachin Kadian

Reputation: 201

you can do this by calling the api asynchronously. i dont know how to do that in ruby but this is the general idea. The api will be called in background and till then you loading icon will be displayed. when the api is fully fetched then you can remove the loading icon.

Upvotes: 0

Related Questions