Test

inst/www/shared/shiny.js

@@ -4765,12 +4765,6 @@
                 sheet.cssText = "";
               import_jquery6.default(sheet.ownerNode).remove();
             };
-            var scheduleCssReporter = function scheduleCssReporter2() {
-              var handle = setInterval(sendImageSize, 100);
-              setTimeout(function() {
-                return clearInterval(handle);
-              }, 1e4);
-            };
             import_jquery6.default.map(links, function(link) {
               var oldSheet = findSheet(link.attr("href"));
               var href2 = link.attr("href") + "?restyle=" + new Date().getTime();
@@ -4779,10 +4773,21 @@
               } else {
                 link.attr("href", href2);
                 link.attr("onload", function() {
-                  scheduleCssReporter();
-                  setTimeout(function() {
-                    return removeSheet(oldSheet);
-                  }, 500);
+                  var dummy_id = "dummy-" + Math.floor(Math.random() * 99999999);
+                  var css_string = "#" + dummy_id + " { color: #" + Math.floor(Math.random() * 16777215).toString(16) + "; transition: 0.2s all; visibility: hidden; position: fixed; top: 0; left: 0; }";
+                  var base64_css_string = "data:text/css;base64," + btoa(css_string);
+                  var dummy_link = document.createElement("link");
+                  dummy_link.rel = "stylesheet";
+                  dummy_link.type = "text/css";
+                  dummy_link.href = base64_css_string;
+                  var $dummy_el = import_jquery6.default("<div id=" + dummy_id + "></div>");
+                  import_jquery6.default(document.body).append($dummy_el);
+                  $dummy_el.one("transitionend", function() {
+                    sendImageSize();
+                    removeSheet(oldSheet);
+                    $dummy_el.remove();
+                  });
+                  $head.append(dummy_link);
                 });
                 $head.append(link);
               }

srcts/src/main.ts

@@ -4080,16 +4080,6 @@ function main(): void {
           $(sheet.ownerNode).remove();
         };
 
-        // There doesn't appear to be proper way to wait until new styles have been
-        // _applied everywhere_ so we repeatedly call sendImageSize() (which also
-        // sends colors and fonts) every .1s for 10 seconds.
-        /* global Shiny */
-        let scheduleCssReporter = function () {
-          let handle = setInterval(sendImageSize, 100);
-
-          setTimeout(() => clearInterval(handle), 10000);
-        };
-
         $.map(links, function (link) {
           // Find any document.styleSheets that match this link's href
           // so we can remove it after bringing in the new stylesheet
@@ -4106,8 +4096,33 @@ function main(): void {
             // Once the new <link> is loaded, schedule the old <link> to be removed
             // on the next tick which is needed to avoid FOUC
             link.attr("onload", () => {
-              scheduleCssReporter();
-              setTimeout(() => removeSheet(oldSheet), 500);
+              const dummy_id = "dummy-" + Math.floor(Math.random() * 99999999);
+              const css_string =
+                "#" + dummy_id +
+                " { color: #" +
+                Math.floor(Math.random() * 16777215).toString(16) + "; " +
+                "transition: 0.2s all; " +
+                "visibility: hidden; " +
+                "position: fixed; top: 0; left: 0; }";
+              const base64_css_string =
+                "data:text/css;base64," + btoa(css_string);
+
+              let dummy_link = document.createElement("link");
+
+              dummy_link.rel = "stylesheet";
+              dummy_link.type = "text/css";
+              dummy_link.href = base64_css_string;
+
+              let $dummy_el = $("<div id=" + dummy_id + "></div>")
+              $(document.body).append($dummy_el);
+              $dummy_el
+                .one("transitionend", () => {
+                  sendImageSize();
+                  removeSheet(oldSheet);
+                  $dummy_el.remove();
+                });
+
+              $head.append(dummy_link);
             });
             $head.append(link);
           }