From ee94fb0b94920ee89a7dbb54133b94f603253c62 Mon Sep 17 00:00:00 2001
From: Jason Novinger <jnovinger@gmail.com>
Date: Tue, 8 Jul 2025 11:20:04 -0400
Subject: [PATCH] Closes #19550: Enhancement: Refactor rack elevations template
 for lazy loading /dcim/rack-elevations/ (#19823)

* Refactor rack elevation template to use htmx for dynamic loading and improved user experience

* rework to prevent dup loading

* Update netbox/templates/dcim/inc/rack_elevation.html

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Update netbox/templates/dcim/inc/rack_elevation.html

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Move inline styles to styles/custom/racks.css

---------

Co-authored-by: tony.nealon@wholesailnetworks.com <tony.nealon@wholesailnetworks.com>
Co-authored-by: tbotnz <tonynealon1989@gmail.com>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
---
 netbox/project-static/dist/netbox.css         | Bin 548284 -> 548342 bytes
 .../project-static/styles/custom/racks.scss   |   4 ++++
 netbox/project-static/styles/netbox.scss      |   1 +
 netbox/templates/dcim/inc/rack_elevation.html |  13 ++++++++++++-
 4 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 netbox/project-static/styles/custom/racks.scss

diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 3cfdc2e5d60b78360d2dae4b1f934ffe033a882e..103e5981e2dd718c66def28638d8068723148f3c 100644
GIT binary patch
delta 85
zcmdn9Tk+d&#fBEf7N!>F7M2#)7Pc1lEgZXJt@Vl$le2Ym@)J`s^U`&b^Ycm)GxJi5
ms&g~*bTd*j(=$q}j0_A4Dy(x8i_(E&IjLzSR>nYqS}p)$!yhsL

delta 27
icmeyiTXD~B#fBEf7N!>F7M2#)7Pc1lEgZXJ8My$QG6{kJ

diff --git a/netbox/project-static/styles/custom/racks.scss b/netbox/project-static/styles/custom/racks.scss
new file mode 100644
index 000000000..3dd20738d
--- /dev/null
+++ b/netbox/project-static/styles/custom/racks.scss
@@ -0,0 +1,4 @@
+.rack-loading-container {
+  min-height: 200px;
+  margin-left: 30px;
+}
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index ab7634cc1..6dbd34846 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -27,3 +27,4 @@
 @import 'custom/markdown';
 @import 'custom/misc';
 @import 'custom/notifications';
+@import 'custom/racks';
diff --git a/netbox/templates/dcim/inc/rack_elevation.html b/netbox/templates/dcim/inc/rack_elevation.html
index 33037c1ff..c51bcec24 100644
--- a/netbox/templates/dcim/inc/rack_elevation.html
+++ b/netbox/templates/dcim/inc/rack_elevation.html
@@ -1,6 +1,17 @@
 {% load i18n %}
 <div style="margin-left: -30px">
-    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation" aria-label="{% trans "Rack elevation" %}"></object>
+  <div
+    hx-get="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{ face }}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}"
+    hx-trigger="intersect"
+    hx-swap="outerHTML"
+    aria-label="{% trans "Rack elevation" %}"
+  >
+    <div class="d-flex justify-content-center align-items-center rack-loading-container">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">{% trans "Loading..." %}</span>
+      </div>
+    </div>
+  </div>
 </div>
 <div class="text-center mt-3">
     <a class="btn btn-outline-primary" href="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" hx-boost="false">