Don't animate expanding columns when restoring

app/assets/stylesheets/card-columns.css

@@ -72,6 +72,11 @@
     scroll-snap-align: start;
     transition: var(--column-transition);
 
+    /* Disable transitions during restoration */
+    &.no-transitions {
+      transition: none;
+    }
+
     /* Make sure filter dialogs don't end up behind sticky headers */
     &:has([open]) {
       z-index: 3;

app/javascript/controllers/collapsible_columns_controller.js

@@ -1,11 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static classes = [ "collapsed" ]
+  static classes = [ "collapsed", "noTransitions" ]
   static targets = [ "column", "button" ]
 
   connect() {
+    this.#disableTransitions()
     this.#restoreColumns()
+    requestAnimationFrame(() => this.#enableTransitions())
   }
 
   toggle({ target }) {
@@ -19,6 +21,22 @@ export default class extends Controller {
     }
   }
 
+  #disableTransitions() {
+    this.columnTargets.forEach(column => {
+      if (this.noTransitionsClass) {
+        column.classList.add(this.noTransitionsClass)
+      }
+    })
+  }
+
+  #enableTransitions() {
+    this.columnTargets.forEach(column => {
+      if (this.noTransitionsClass) {
+        column.classList.remove(this.noTransitionsClass)
+      }
+    })
+  }
+
   #toggleColumn(column) {
     this.#collapseAllExcept(column)
 

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

@@ -8,7 +8,7 @@
         dragenter->drag-and-strum#dragEnter
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
-  <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
+  <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed" data-collapsible-columns-no-transitions-class="no-transitions">
     <div class="card-columns__left">
       <%= render "collections/show/not_now", collection: collection %>
     </div>