Only enable transitions on user interaction

app/javascript/controllers/collapsible_columns_controller.js

@@ -25,6 +25,7 @@ export default class extends Controller {
   }
 
   toggle({ target }) {
+    this.#enableTransitions()
     const column = target.closest('[data-collapsible-columns-target="column"]')
     this.#toggleColumn(column);
   }
@@ -35,13 +36,14 @@ export default class extends Controller {
     }
   }
 
-  async restoreState(event) {
+  async restoreState() {
     await nextFrame()
     await this.#restoreColumnsDisablingTransitions()
   }
 
   focusOnColumn({ target }) {
     if (this.#isCollapsed(target)) {
+      this.#enableTransitions()
       this.#collapseAllExcept(target)
       this.#expand(target)
     }
@@ -52,7 +54,6 @@ export default class extends Controller {
     this.#restoreColumns()
 
     await nextFrame()
-    this.#enableTransitions()
   }
 
   #disableTransitions() {

app/views/boards/show/_columns.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div class: "card-columns hide-scrollbar", data: {
+<%= tag.div class: "card-columns no-transitions hide-scrollbar", data: {
       controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list card-hotkeys",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
       drag_and_drop_hover_container_class: "drag-and-drop__hover-container",

app/views/public/boards/show/_columns.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag :cards_container do %>
-  <div class="card-columns hide-scrollbar"
+  <div class="card-columns no-transitions hide-scrollbar"
     data-controller="collapsible-columns"
     data-collapsible-columns-board-value="<%= board.id %>"
     data-collapsible-columns-collapsed-class="is-collapsed"