From e37dd3a6d07e3e97d94afc8194dcb23b928fbb3d Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Fri, 18 Feb 2022 15:59:33 -0600
Subject: [PATCH] uploads: change loading indicator for thumbnails.

Use a spinner icon instead of the word "Loading" for thumbnails that are
being processed in the background in a batch upload.

Also use morphdom to update thumbnails so we only update the parts of
the DOM that actually changed.
---
 .../media_asset_preview_component.html.erb                | 2 +-
 app/javascript/packs/application.js                       | 2 ++
 app/views/upload_media_assets/_preview.html.erb           | 2 +-
 app/views/upload_media_assets/index.js.erb                | 6 +++++-
 package.json                                              | 1 +
 yarn.lock                                                 | 8 ++++++++
 6 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/components/media_asset_preview_component/media_asset_preview_component.html.erb b/app/components/media_asset_preview_component/media_asset_preview_component.html.erb
index 62ce73ffb..14d899a17 100644
--- a/app/components/media_asset_preview_component/media_asset_preview_component.html.erb
+++ b/app/components/media_asset_preview_component/media_asset_preview_component.html.erb
@@ -30,7 +30,7 @@
     <% else %>
       <div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
         <% if media_asset.processing? %>
-          Loading
+          <%= spinner_icon(class: "animate-spin h-8") %>
         <% elsif media_asset.failed? %>
           Failed
         <% else %>
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 2a6f11ba5..0edbd8fb3 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -9,6 +9,7 @@ import "core-js/web/dom-collections";
 require('@rails/ujs').start();
 require('hammerjs');
 require('jquery-hotkeys');
+import morphdom from 'morphdom';
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
@@ -91,4 +92,5 @@ Danbooru.error = Utility.error;
 
 window.$ = jQuery;
 window.jQuery = jQuery;
+window.morphdom = morphdom;
 window.Danbooru = Danbooru;
diff --git a/app/views/upload_media_assets/_preview.html.erb b/app/views/upload_media_assets/_preview.html.erb
index 38f6eebe1..39bf51150 100644
--- a/app/views/upload_media_assets/_preview.html.erb
+++ b/app/views/upload_media_assets/_preview.html.erb
@@ -5,7 +5,7 @@
     <% if upload_media_asset.failed? %>
       Failed
     <% else %>
-      Loading
+      <%= spinner_icon(class: "animate-spin h-8") %>
     <% end %>
   <% end %>
 
diff --git a/app/views/upload_media_assets/index.js.erb b/app/views/upload_media_assets/index.js.erb
index 188506e5d..45d27cb12 100644
--- a/app/views/upload_media_assets/index.js.erb
+++ b/app/views/upload_media_assets/index.js.erb
@@ -1,3 +1,7 @@
 <% @upload_media_assets.each do |upload_media_asset| %>
-  $(".upload-media-asset-preview[data-id=<%= upload_media_asset.id %>]").replaceWith("<%= j render("upload_media_assets/preview", upload_media_asset: upload_media_asset, size: params.fetch(:size, 180)) %>");
+  $(function() {
+    let $el = $(".upload-media-asset-preview[data-id=<%= upload_media_asset.id %>]").get(0);
+    let html = "<%= j render("upload_media_assets/preview", upload_media_asset: upload_media_asset, size: params.fetch(:size, 180)) %>";
+    morphdom($el, html);
+  });
 <% end %>
diff --git a/package.json b/package.json
index 7d549bcf8..64adb76dc 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "jquery-ui": "^1.13.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.5.1",
+    "morphdom": "^2.6.1",
     "postcss": "^8.4.5",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
diff --git a/yarn.lock b/yarn.lock
index d6a8521f1..834d2d73f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5587,6 +5587,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"morphdom@npm:^2.6.1":
+  version: 2.6.1
+  resolution: "morphdom@npm:2.6.1"
+  checksum: 91642cf02eca6024bc689c9ec942fc7beade02602292e7bbb47538de9c51253482b323c213237017ddebe8c15a2011c93d22ab21a7809d739f06531acd6cca2b
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -7105,6 +7112,7 @@ fsevents@~2.3.2:
     jquery-ui: ^1.13.0
     lodash: ^4.17.21
     mini-css-extract-plugin: ^2.5.1
+    morphdom: ^2.6.1
     postcss: ^8.4.5
     postcss-import: ^14.0.2
     postcss-loader: ^6.2.1