Hello, I am currently working on a Rails application focused on displaying user-generated content. Within one of my controllers, specifically the #show action, I am making an API call to generate recommendations for "up next" content. This API call typically takes around 5 seconds to return a response, which is not excessively long but still poses an issue in terms of user experience as waiting for this could delay the initial page load significantly.
The actual recommendations are intended to be visible only when users have already scrolled approximately two-thirds of the way down the page. Thus, there is no need for them to be present during the initial loading of the page.
I was wondering if there is an effective method to load the remaining content of the page first and then selectively load just the section containing the recommendations once the API call has finished fetching the necessary data. Thank you in advance!
Controller
class DiscoverEmailsController < ApplicationController
def show
@discover_email = DiscoverEmail.find_by(message_id: params[:message_id])
# Just in development phase
@up_next = Rails.env.development?
# The API call that is causing delays
up_next_ids = RecommendationsHelper.get_one_step_recommendations(@discover_email.subject, @discover_email.preview, @discover_email.senders_name)
up_next_ids.each do |message_id_and_score|
break if @up_next.length >= 4
discover_email = DiscoverEmail.find_by(message_id: message_id_and_score[1])
unless discover_email.nil?
@up_next << discover_email unless discover_email.image_url.nil? || discover_email.senders_name.nil? || discover_email.subject.nil?
end
end
else
@up_next = DiscoverEmail.where.not(senders_name: nil, image_url: nil, subject: nil).order(date: :desc).last(4)
end
DiscoverEmail.track_view(email_address, @discover_email)
end
end
View Body
<body class="iframe-page">
<h3 class="email-subject"><%= @discover_email.subject %></h3>
<div class="iframe-content">
<iframe id="iframe" sandbox="allow-same-origin allow-scripts allow-popups" src="<%= @url %>" allowfullscreen></iframe>
<!-- Section intended to be loaded later -->
<div id="discover-up-next">
<div id="up-next-border">
<div class="border-lines"></div>
<p id="up-next-text">NEXT UP</p>
<div class="border-lines"></div>
</div>
<div id="up-next-cells" style="display: inline-flex; height: 110px;">
<% @up_next.each_with_index do |discover_email, index| %>
<% if discover_email.subscription.clearbit_logo_url.nil? || discover_email.subscription.clearbit_logo_url == "noclearbitlogo" %>
<% logo_safe = "https://s3-us-west-2.amazonaws.com/myblendappimages/blend_logo_mashup_pattern_80.png" %>
<% elsif discover_email.subscription.clearbit_logo_url.include? "http://logo.clearbit.com/"%>
<% logo_safe = discover_email.subscription.clearbit_logo_url %>
<% else %>
<% logo_safe = "http://logo.clearbit.com/" + discover_email.subscription.clearbit_logo_url %>
<% end %>
<% subject = discover_email.fit_subject %>
<div id="recommendation-<%= index + 1 %>" style="height: 110px; width: 320px;">
<% unless index == 0 %>
<div class="left-line" >
<% end %>
<div class="up-next-cell">
<div class="row">
<div class="discover-up-next-cell-text col-xs-8" style="padding: 0 0 0 10px; text-align: left;">
<%= link_to subject, discover_show_path(message_id: discover_email.message_id), class: "up-next-cell-subject" %>
<div class="row" style="margin-top: 5px;">
<div class="gallery_card_logo col-sm-2 col-xs-3 no-padding" style="width: 20px !important; margin-right: 5px;">
<%= image_tag(logo_safe, style: "width: 20px; height: 20px; float: left;") %>
</div>
<div class="col-xs-9 no-padding">
<p class="discover-up-next-senders-name"><%= discover_email.senders_name %></p>
</div>
</div>
</div>
<div class="col-xs-4 no-padding">
<%= link_to(image_tag(discover_email.image_url, class: "discover-email-up-next-cell-image"), discover_show_path(message_id: discover_email.message_id)) %>
</div>
</div>
</div>
<% unless index == 0 %>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
</body>