DEV: Show a loading spinner on video placeholders (#24039)

This commit adds a loading spinner that appears immediately after
clicking the play button on a video placeholder and will go away once
the "onCanPlay" event fires for the video.

This prevents a completely empty (no play button) placeholder from
appearing for some amount of time while the video is loading enough to
start playing.

app/assets/javascripts/discourse/app/instance-initializers/video-placeholder.js

@@ -1,3 +1,4 @@
+import { spinnerHTML } from "discourse/helpers/loading-spinner";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import discourseLater from "discourse-common/lib/later";
@@ -9,6 +10,11 @@ export default {
       function handleVideoPlaceholderClick(helper, event) {
         const parentDiv = event.target.closest(".video-placeholder-container");
         const wrapper = parentDiv.querySelector(".video-placeholder-wrapper");
+        const overlay = wrapper.querySelector(".video-placeholder-overlay");
+
+        parentDiv.style.cursor = "";
+        parentDiv.removeEventListener("click", handleVideoPlaceholderClick);
+        overlay.innerHTML = spinnerHTML;
 
         const videoHTML = `
         <video width="100%" height="100%" preload="metadata" controls style="display:none">

app/assets/javascripts/discourse/tests/acceptance/video-placeholder-test.js

@@ -18,10 +18,36 @@ acceptance("Video Placeholder Test", function () {
 
     assert.dom("video").doesNotExist("The video element does not exist yet");
 
-    await click(overlay);
+    await click(overlay); // Play button is clicked
 
     assert.dom(".video-container").exists("The video container appears");
 
+    assert
+      .dom(postWithVideo)
+      .hasStyle({ cursor: "auto" }, "The cursor is set back to normal");
+
+    assert
+      .dom(".video-placeholder-overlay > div")
+      .hasClass("spinner", "has a loading spinner");
+
     assert.dom("video").exists("The video element appears");
+
+    assert
+      .dom("video > source")
+      .hasAttribute(
+        "src",
+        "/uploads/default/original/1X/55508bc98a00f615dbe9bd4c84a253ba4238b021.mp4",
+        "Video src is correctly set"
+      );
+
+    const video = postWithVideo.querySelector("video");
+    video.play = function () {}; // We don't actually want the video to play in our test
+    const canPlayEvent = new Event("canplay");
+    video.dispatchEvent(canPlayEvent);
+
+    assert
+      .dom(video)
+      .hasStyle({ display: "block" }, "The video is no longer hidden");
+    assert.dom(".video-placeholder-wrapper").doesNotExist();
   });
 });