From 8e8a39af43b96d31dc451795f95ead20f73b1845 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 9 Aug 2018 00:24:08 -0500
Subject: [PATCH] comments.js: fix forms flickering on page load.

Mark the edit form, new comment form, and unvote links as hidden in
html, instead of showing them by default then hiding them later in
Javascript. This eliminates flickering on page load.
---
 app/javascript/src/javascripts/comments.js         | 10 ----------
 app/views/comments/_form.html.erb                  |  2 +-
 app/views/comments/edit.html.erb                   |  2 +-
 app/views/comments/partials/index/_list.html.erb   |  2 +-
 app/views/comments/partials/show/_comment.html.erb |  4 ++--
 5 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/app/javascript/src/javascripts/comments.js b/app/javascript/src/javascripts/comments.js
index 7131d8393..63ad45bc6 100644
--- a/app/javascript/src/javascripts/comments.js
+++ b/app/javascript/src/javascripts/comments.js
@@ -8,7 +8,6 @@ Comment.initialize_all = function() {
     this.initialize_response_link();
     this.initialize_reply_links();
     this.initialize_expand_links();
-    this.initialize_vote_links();
 
     if (!$("#a-edit").length) {
       this.initialize_edit_links();
@@ -27,7 +26,6 @@ Comment.initialize_all = function() {
     }
     Comment.initialize_reply_links(current_comment_section);
     Comment.initialize_edit_links(current_comment_section);
-    Comment.initialize_vote_links(current_comment_section);
     Dtext.initialize_expandables(current_comment_section);
   });
 }
@@ -74,13 +72,10 @@ Comment.initialize_response_link = function() {
     Utility.scroll_to($form);
     e.preventDefault();
   });
-
-  $("div.new-comment form").hide();
 }
 
 Comment.initialize_edit_links = function($parent) {
   $parent = $parent || $(document);
-  $parent.find(".edit_comment").hide();
   $parent.find(".edit_comment_link").click(function(e) {
     var link_id = $(this).attr("id");
     var comment_id = link_id.match(/^edit_comment_link_(\d+)$/)[1];
@@ -111,11 +106,6 @@ Comment.hide_threshold_comments = function(post_id) {
   });
 }
 
-Comment.initialize_vote_links = function($parent) {
-  $parent = $parent || $(document);
-  $parent.find(".unvote-comment-link").hide();
-}
-
 $(document).ready(function() {
   Comment.initialize_all();
 });
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 645385043..e64ee90f1 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -1,6 +1,6 @@
 <%= error_messages_for :comment %>
 
-<%= simple_form_for(comment, :html => {:class => "edit_comment"}) do |f| %>
+<%= simple_form_for(comment, :html => {:style => ("display: none;" if local_assigns[:hidden]), :class => "edit_comment"}) do |f| %>
   <%= f.hidden_field :post_id %>
   <%= dtext_field "comment", "body", :classes => "autocomplete-mentions", :value => comment.body, :input_id => "comment_body_for_#{comment.id}", :preview_id => "dtext-preview-for-#{comment.id}" %>
   <%= f.button :submit, "Submit" %>
diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb
index 6914b6f77..b163f50a7 100644
--- a/app/views/comments/edit.html.erb
+++ b/app/views/comments/edit.html.erb
@@ -2,7 +2,7 @@
   <div id="a-edit">
     <h1>Edit Comment</h1>
 
-    <%= render "comments/form", :post => @comment.post, :comment => @comment %>
+    <%= render "comments/form", comment: @comment %>
   </div>
 </div>
 
diff --git a/app/views/comments/partials/index/_list.html.erb b/app/views/comments/partials/index/_list.html.erb
index 6cf957800..10c092ed6 100644
--- a/app/views/comments/partials/index/_list.html.erb
+++ b/app/views/comments/partials/index/_list.html.erb
@@ -28,7 +28,7 @@
   <% if CurrentUser.is_member? %>
     <div class="new-comment">
       <p><%= link_to "Post comment", new_comment_path, :class => "expand-comment-response" %></p>
-      <%= render "comments/form", :post => post, :comment => post.comments.new %>
+      <%= render "comments/form", comment: post.comments.new, hidden: true %>
     </div>
   <% end %>
 </div>
diff --git a/app/views/comments/partials/show/_comment.html.erb b/app/views/comments/partials/show/_comment.html.erb
index a490a7b2d..5d9f9a306 100644
--- a/app/views/comments/partials/show/_comment.html.erb
+++ b/app/views/comments/partials/show/_comment.html.erb
@@ -35,7 +35,7 @@
             <% end %>
             <li id="comment-vote-up-link-for-<%= comment.id %>"><%= link_to "Vote up", comment_votes_path(:comment_id => comment.id, :score => "up"), :method => :post, :remote => true %></li>
             <li id="comment-vote-down-link-for-<%= comment.id %>"><%= link_to "Vote down", comment_votes_path(:comment_id => comment.id, :score => "down"), :method => :post, :remote => true %></li>
-            <li id="comment-unvote-link-for-<%= comment.id %>" class="unvote-comment-link"><%= link_to "Unvote", comment_votes_path(:comment_id => comment.id), :method => :delete, :remote => true %></li>
+            <li style="display: none;" id="comment-unvote-link-for-<%= comment.id %>" class="unvote-comment-link"><%= link_to "Unvote", comment_votes_path(:comment_id => comment.id), :method => :delete, :remote => true %></li>
             <% if CurrentUser.is_moderator? %>
               <li>|</li>
               <li>
@@ -46,7 +46,7 @@
           <% end %>
         </menu>
         <% if comment.editable_by?(CurrentUser.user) %>
-          <%= render "comments/form", :post => comment.post, :comment => comment %>
+          <%= render "comments/form", comment: comment, hidden: true %>
         <% end %>
       <% end %>
     </div>