From c37f4b8fb1aa5e33a8abac09cf42ded9c5ea3c10 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Tue, 24 May 2022 08:05:17 +0900
Subject: [PATCH] Bug 1770744 - Show spinner in place of Done checkbox during
 waiting for server response.

---
 .../diff/view/PHUIDiffInlineCommentDetailView.php  |  9 ++++++++-
 .../differential/phui-inline-comment.css           | 10 ++++++++++
 webroot/rsrc/js/application/diff/DiffInline.js     | 14 ++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
index 3ff87c11ab..c615a4ee56 100644
--- a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
+++ b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
@@ -305,12 +305,19 @@ public function render() {
             'class' => 'differential-inline-done',
             'sigil' => 'differential-inline-done',
           ));
-        $done_button = phutil_tag(
+        $done_button = javelin_tag(
           'label',
           array(
             'class' => 'differential-inline-done-label ',
+            'sigil' => 'differential-inline-done-label',
           ),
           array(
+            phutil_tag(
+              'span',
+              array(
+                'class' => 'differential-inline-done-spinner ',
+              )
+            ),
             $done_input,
             pht('Done'),
           ));
diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css
index 246c81013c..953a77bca5 100644
--- a/webroot/rsrc/css/application/differential/phui-inline-comment.css
+++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css
@@ -285,6 +285,16 @@
     border-color: {$sky};
 }
 
+.differential-inline-done-label.loading .differential-inline-done-spinner:before {
+  content: "\f110";
+  font-family: FontAwesome;
+  margin: 0 6px 0 0;
+}
+
+.differential-inline-done-label.loading .differential-inline-done {
+  display: none;
+}
+
 /* - Inline State is Draft ----------------------------------------------------
 
   The Unsubmitted state of the comment / done checkbox styles.
diff --git a/webroot/rsrc/js/application/diff/DiffInline.js b/webroot/rsrc/js/application/diff/DiffInline.js
index 4a0db5b520..3f4715a41e 100644
--- a/webroot/rsrc/js/application/diff/DiffInline.js
+++ b/webroot/rsrc/js/application/diff/DiffInline.js
@@ -357,6 +357,13 @@ JX.install('DiffInline', {
     },
 
     toggleDone: function() {
+      var label = JX.DOM.find(
+        this._row,
+        'label',
+        'differential-inline-done-label');
+
+      JX.DOM.alterClass(label, 'loading', true);
+
       var uri = this._getInlineURI();
       var data = {
         op: 'done',
@@ -371,6 +378,13 @@ JX.install('DiffInline', {
     },
 
     _ondone: function(response) {
+      var label = JX.DOM.find(
+        this._row,
+        'label',
+        'differential-inline-done-label');
+
+      JX.DOM.alterClass(label, 'loading', false);
+
       var checkbox = JX.DOM.find(
         this._row,
         'input',