https://railsblocks.com/assets/controllers/snippet_controller-ba06…38781569afce34c48ec61e6100d7c8980305067c.js

1import { Controller } from "@hotwired/stimulus";
2
3export default class extends Controller {
4  static targets = ["refreshable"];
5
6  refresh() {
7    const refreshableElement = this.refreshableTarget;
8
9    // Store the original HTML and current scroll position
10    const originalHTML = refreshableElement.innerHTML;
11    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
12
13    // Create a temporary placeholder to maintain layout
14    const placeholder = document.createElement("div");
15    placeholder.style.height = refreshableElement.offsetHeight + "px";
16    placeholder.style.visibility = "hidden";
17
18    // Insert placeholder and remove original content
19    refreshableElement.parentNode.insertBefore(placeholder, refreshableElement);
20    refreshableElement.style.display = "none";
21
22    // Use a minimal timeout to ensure DOM updates
23    setTimeout(() => {
24      // Restore content and remove placeholder
25      refreshableElement.innerHTML = originalHTML;
26      refreshableElement.style.display = "";
27      placeholder.remove();
28
29      // Restore scroll position if it changed
30      if (Math.abs((window.pageYOffset || document.documentElement.scrollTop) - scrollTop) > 5) {
31        window.scrollTo(0, scrollTop);
32      }
33
34      // Dispatch refresh event
35      this.dispatch("refreshed", {
36        detail: {
37          refreshedElement: refreshableElement,
38        },
39      });
40    }, 10);
41  }
42};