feature: prefetch table row records on hover

app/components/avo/index/table_row_component.html.erb

@@ -1,4 +1,4 @@
-<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>
+<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21 %>
 
 <%= content_tag :tr,
   id: "#{self.class.to_s.underscore}_#{@resource.record_param}",
@@ -10,7 +10,7 @@
     record_id: @resource.record_param,
     **(click_row_to_view_record ? {
       visit_path: helpers.resource_show_path(resource: @resource, parent_resource: @parent_resource, parent_record: @parent_record, parent_or_child_resource:),
-      action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord"
+      action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord mouseenter->table-row#mouseEntered mouseleave->table-row#mouseLeft"
     } : {}),
     **item_selector_data_attributes(@resource, controller: class_names("table-row": click_row_to_view_record)),
     **(try(:drag_reorder_item_data_attributes) || {}),

app/javascript/js/controllers/table_row_controller.js

@@ -6,6 +6,55 @@ export default class extends Controller {
     this.#bindSelectionEvents()
   }
 
+  // add another timer which starts on this method and stops on mouseleft method
+  mouseLeftTimer = null
+
+  anchor = null
+
+  debug = false
+
+  startMouseLeftTimer() {
+    this.mouseLeftTimer = performance.now()
+  }
+
+  stopMouseLeftTimer() {
+    this.mouseLeftTimer = performance.now() - this.mouseLeftTimer
+    console.log('time taken', this.mouseLeftTimer, 'milliseconds')
+  }
+
+  mouseEntered(event) {
+    if (this.debug) {
+      console.log('mouseEntered')
+      this.startMouseLeftTimer()
+    }
+    const row = event.target.closest('tr')
+    const url = row.dataset.visitPath
+
+    if (url) {
+      this.anchor = this.createAnchor(url)
+      this.anchor.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+    }
+  }
+
+  mouseLeft() {
+    if (this.anchor) {
+      this.anchor.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
+    }
+    if (this.debug) {
+      console.log('mouseLeft')
+      this.stopMouseLeftTimer()
+    }
+  }
+
+  createAnchor(url) {
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.rel = 'noopener noreferrer'
+    document.body.appendChild(anchor)
+
+    return anchor
+  }
+
   visitRecord(event) {
     if (event.type !== 'click') {
       return