Skip to content

Fix tweakpane styling race condition #837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Micheal Parks (micheal-parks) wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix tweakpane styling race condition #837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
50a9b0f
fix tweakpane race condition
micheal-parks Jul 10, 2026
36fd865
Create gold-peas-beg.md
micheal-parks Jul 10, 2026
e541a61
lint
micheal-parks Jul 10, 2026
46c812e
Merge branch 'tweakpane-2' of https://github.com/viamrobotics/acdc in…
micheal-parks Jul 10, 2026
c3f0de5
better comment
micheal-parks Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gold-peas-beg.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@viamrobotics/motion-tools": patch
---

Fix tweakpane styling race condition
18 changes: 13 additions & 5 deletions src/lib/components/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<script lang="ts">
import type { Struct } from '@viamrobotics/sdk'
import type { Entity } from 'koota'
import type { Snippet } from 'svelte'

import { Canvas } from '@threlte/core'
import { PortalTarget } from '@threlte/extras'
import { useXR } from '@threlte/xr'
import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
import { primeTheme } from '@viamrobotics/tweakpane-config'
import { onMount, type Snippet } from 'svelte'
import { ThemeUtils } from 'svelte-tweakpane-ui'

import type { FragmentInfo } from '$lib/hooks/useFragmentInfo.svelte'
Expand Down Expand Up @@ -88,6 +88,18 @@
details,
}: Props = $props()

/**
* Apply the Viam tweakpane theme to `<html>` here in setup, before any child
* is created. This must not be deferred to `onMount`: a parent's `onMount`
* runs only after all of its children have mounted, and each child `<Pane>`
* builds its underlying Tweakpane instance during its own setup. So by the
* time App's `onMount` fired the panes already existed and could paint with
* Tweakpane's default dark theme before the theme variables reached `<html>`.
* Running in setup guarantees the variables are set before any pane is built.
* `setGlobalDefaultTheme` no-ops when there is no document (prerender).
*/
ThemeUtils.setGlobalDefaultTheme(primeTheme)

provideWorld()
provideSettingsTabs()

Expand Down Expand Up @@ -122,10 +134,6 @@
environment.current.isStandalone = !localConfigProps
})

onMount(() => {
ThemeUtils.setGlobalDefaultTheme(primeTheme)
})

const selected = useQuery(traits.Selected)
</script>

Expand Down
Loading