Make initial sync of javascript more resilient to javascript load order

app/assets/javascripts/application.js

@@ -103,6 +103,8 @@ function updateFavicon() {
 document.addEventListener("turbolinks:load", function() {
   enableKeyboardShortcuts();
 
+  if($(".js-initial_sync").length){ sync() }
+
   if($("#help-box").length){
     $('button.archive_selected, button.unarchive_selected').click(toggleArchive);
     $('button.select_all').click(toggleSelectAll);

app/views/notifications/index.html.erb

@@ -52,12 +52,11 @@
           <% if @notifications.to_a.any? %>
             <%= render partial: 'notification', collection: @notifications %>
           <% elsif initial_sync? %>
-            <div class="blankslate blankslate-spacious blankslate-clean-background">
+            <div class="blankslate blankslate-spacious blankslate-clean-background js-initial_sync">
               <%= octicon 'cloud-download', height: 32, class: 'blankslate-icon' %>
               <h3>Syncing your notifications for the first time...</h3>
               <p>This might take a minute or two</p>
             </div>
-            <%= javascript_tag "sync()" %>
           <% elsif no_url_filter_parameters_present %>
             <div class="blankslate blankslate-spacious blankslate-clean-background">
               <%= octicon 'mail-read', height: 32, class: 'blankslate-icon' %>