Rails 5 flickering of div from browser cache

Question

Hello this is my first question to Stack Overflow. I built a social networking site with Rails 5.0.2. The initial page renders a collection of users and the application layout template includes a chat icon at the top that shows the number of unread messages in a circular red badge.

• The red badge is a div styled and positioned by CSS.
• Inside the red badge div I render a layouts/_notifications.html.erb partial to populate the number of unread messages
• The notifications partial calls a helper method to return the number of unread messages
• The same helper method hides the div if there are no unread messages

The red badge div looks like this:

<div id="unread_conversations" style="<%= "display:none;" if unread_conversations == 0 %>">
  <%= render partial: 'layouts/notifications' %>
</div>

The _notifications partial looks like this:

<%= unread_conversations %>

The helper method looks like this:

def unread_conversations
  return Conversation.where("(conversations.sender_id = ? OR conversations.recipient_id = ?) AND messages.sender_id != ? AND messages.opened_at IS NULL", current_user, current_user, current_user).joins(:messages).count
end

Additional information:

On receipt of an ActionCable broadcast I re-render the red badge div asynchronously (and this works great):

received: function(data) {
  // Called when there's incoming data on the websocket for this channel
  value = $("#unread_conversations").html();
  value = parseInt(value) + 1;
  $("#unread_conversations").html(value);
  $("#unread_conversations").show();
  $('#sound_element')[0].play();
}

The problem:

After a message has been read...

• When the user goes to another page by clicking a link, the red badge flickers on and then disappears after the page completely reloads.

• And, if they return using a browser back button the red badge appears and stays on.

The question:

How do I make it so that the red badge div is hidden on all pages once the user reads all their messages?

My attempted (and failed) solutions:

1) Hide the red badge by default in the layout template and then show it using javascript.

<div id="unread_conversations" style="display:none;">
  <%= render :partial => 'layouts/notifications' %>
</div>

and

<% if unread_conversations > 0 %>$('#unread_conversations').show();<% end %>

3) Tried to prevent caching of the partial.

render partial: 'layouts/notifications', cache: false

Neither fixed the problem.

Answer 1

Would you please try this out once i think it would work:

<% unless unread_conversations == 0 %>
 <div id="unread_conversations">
   <%= render partial: 'layouts/notifications' %>
</div>
<% end %>