Is there a way to expand/collapse folders without animation?

[unstoppablecarl]

Using the following to store/load state

  const localStorageKey = 'gui-state'

  const pane = new Pane()

  pane.on('change', () => {
    localStorage.setItem(localStorageKey, JSON.stringify(pane.exportState()))
    console.log(JSON.stringify(pane.exportState()))
  })

  const savedState = localStorage.getItem(localStorageKey)
  if (savedState) {
    pane.importState(JSON.parse(savedState))
  }

When the page first loads folders are in their default expanded/collapsed state then tween to the saved state. Is there a way to have them skip the tween so they appear to load initially in the same expanded/collapsed state?

I have a clumsy workaround but it only works with root level folders:

export class PaneFolderStore {
  private LOCAL_STORAGE_KEY: 'gui-folders'
  private folders = new Map<string, FolderApi>()
  private expandedByDefault = true
  private prevState: Record<string, boolean>

  constructor() {
    this.prevState = this.load()
  }

  add(pane: Pane, params: FolderParams) {
    const title = params.title as string
    params.expanded = this.prevState?.[title] ?? this.expandedByDefault

    const folder = pane.addFolder(params)
    this.folders.set(folder.title as string, folder)
    return folder
  }

  save() {
    const state: Record<string, boolean> = {}
    for (let [title, folder] of this.folders) {
      state[title] = folder.expanded
    }

    localStorage.setItem(this.LOCAL_STORAGE_KEY, JSON.stringify(state))
  }

  load() {
    const savedState = localStorage.getItem(this.LOCAL_STORAGE_KEY)
    if (savedState) {
      return JSON.parse(savedState)
    }
  }
}
const pane = new Pane()
const folders = new PaneFolderStore()
const myFolder = folders.add(pane, {title: 'Settings'})

pane.on('change', () => {
  folders.save()
})

[unstoppablecarl]

Also thought of this.

.no-transition {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

  const pane = new Pane()
  pane.element.classList.add('no-transition')

  setTimeout(() => {
    pane.element.classList.remove('no-transition')
  }, 200)

Not ideal as you have to know the transition time which might be changed by a theme. Also the expand/collapse will not be animated until the timeout if you clicked something before the timeout.