Move comments to a turbo frame

app/controllers/ajax/comment_controller.rb

@@ -14,10 +14,12 @@ class Ajax::CommentController < AjaxController
       return
     end
 
+    comments = Comment.where(answer:).includes([{user: :profile}, :smiles])
+
     @response[:status] = :okay
     @response[:message] = t(".success")
     @response[:success] = true
-    @response[:render] = render_to_string(partial: 'answerbox/comments', locals: { a: answer })
+    @response[:render] = render_to_string(partial: 'answerbox/comments', locals: { a: answer, comments: })
     @response[:count] = answer.comment_count
   end
 

app/controllers/comment_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class CommentController < ApplicationController
+  def index
+    answer = Answer.find(params[:id])
+    comments = Comment.where(answer:).includes([{user: :profile}, :smiles])
+
+    render "index", locals: { a: answer, comments: }
+  end
+end

app/views/answerbox/_comments.html.haml

@@ -1,8 +1,8 @@
-- if a.comments.all.count.zero?
+- if comments.all.count.zero?
   = t(".none")
 - else
   %ul.comment__container
-    - a.comments.order(:created_at).each do |comment|
+    - comments.order(:created_at).each do |comment|
       %li.comment{ data: { comment_id: comment.id } }
         %div{ style: "height: 0; width: 0" }= render "modal/comment_smiles", comment: comment
         .d-flex
@@ -24,20 +24,3 @@
               %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
                 %span.caret
               = render "actions/comment", comment: comment, answer: a
-- if user_signed_in?
-  %button.d-none{ name: "ab-open-and-comment", data: { a_id: a.id, selection_hotkey: "c" } }
-  .comment__compose-wrapper{
-    name: "ab-comment-new-group",
-    data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 }
-  }
-    .form-group.has-feedback.comment__input-group.input-group
-      %textarea.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } }
-    .comment__submit-wrapper
-      %button.btn.btn-primary{
-        type: :button,
-        name: "ab-comment-new-submit",
-        title: t(".action"),
-        data: { a_id: a.id, "character-count-target": "action" }
-      }
-        %i.fa.fa-paper-plane-o
-      %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512

app/views/application/_answerbox.html.haml

@@ -35,5 +35,24 @@
         .col-md-6.d-md-flex.answerbox__actions
           = render "answerbox/actions", a:, display_all:, subscribed_answer_ids:
   .card-footer{ id: "ab-comments-section-#{a.id}", class: display_all.nil? ? "d-none" : nil }
-    %div{ id: "ab-smiles-#{a.id}" }= render "answerbox/smiles", a: a
+    = turbo_frame_tag("ab-comments-list-#{a.id}", src: comments_path(a.question, a), loading: :lazy) do
-    %div{ id: "ab-comments-#{a.id}" }= render "answerbox/comments", a: a
+      .d-flex.justify-content-center
+        .spinner-border{ role: :status }
+          .visually-hidden= t("voc.loading")
+    - if user_signed_in?
+      %button.d-none{ name: "ab-open-and-comment", data: { a_id: a.id, selection_hotkey: "c" } }
+      .comment__compose-wrapper{
+        name: "ab-comment-new-group",
+        data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 }
+      }
+        .form-group.has-feedback.comment__input-group.input-group
+          %textarea.form-control.comment__input{ type: :text, placeholder: t(".comments.placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } }
+        .comment__submit-wrapper
+          %button.btn.btn-primary{
+            type: :button,
+            name: "ab-comment-new-submit",
+            title: t(".comments.action"),
+            data: { a_id: a.id, "character-count-target": "action" }
+          }
+            %i.fa.fa-paper-plane-o
+          %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512

app/views/comment/index.html.haml

@@ -0,0 +1,3 @@
+= turbo_frame_tag "ab-comments-list-#{a.id}" do
+  %div{ id: "ab-smiles-#{a.id}" }= render "answerbox/smiles", a:
+  %div{ id: "ab-comments-#{a.id}" }= render "answerbox/comments", a:, comments:

config/locales/views.en.yml

@@ -117,18 +117,18 @@ en:
     actions:
       share:
         title: "Share"
-    comments:
-      none: "There are no comments yet."
-      placeholder: "Comment..."
-      action: "Post comment"
     smiles:
       none: "No one smiled this yet."
+    comments:
+      none: "There are no comments yet."
   application:
     answerbox:
       read: "Read the entire answer"
       answered: "%{hide} %{user}" # resolves into "Answered by %{user}"
       hide: "Answered by"
       pinned: "Pinned"
+      comments:
+        placeholder: "Comment…"
     questionbox:
       title: "Ask something!"
       placeholder: "Type your question here…"

config/locales/voc.en.yml

@@ -12,6 +12,7 @@ en:
     follow: "Follow"
     format_markdown: "Styling with Markdown is supported"
     load: "Load more"
+    loading: "Loading…"
     login: "Sign in"
     logout: "Sign out"
     mute: "Mute"

config/routes.rb

@@ -153,6 +153,7 @@ Rails.application.routes.draw do
   get "/@:username/a/:id", to: "answer#show", as: :answer
   post "/@:username/a/:id/pin", to: "answer#pin", as: :pin_answer
   delete "/@:username/a/:id/pin", to: "answer#unpin", as: :unpin_answer
+  get "/@:username/a/:id/comments", to: "comment#index", as: :comments
   get "/@:username/q/:id", to: "question#show", as: :question
   get "/@:username/followers", to: "user#followers", as: :show_user_followers
   get "/@:username/followings", to: "user#followings", as: :show_user_followings