How to have parent wait for the onMount event from its child component?

Question

How do I make the parent component wait for the child component to render?

In the example below, I have a button the shows "IconSun" some milliseconds before switching to "IconMoon". If I surround that part with a {#if theme} then the component just doesn't render until a few milliseconds after.

Is there a way to have the parent only render after the onMount hook from its child component?

<!-- Parent.svelte -->
<script>
  import Child from "./Child.svelte"
</script>

<Child />

<!-- Child.svelte -->
<script>
  import { onMount } from "svelte"

  let theme: string

  onMount(() => {
    theme = localStorage.theme
    setTheme(theme)
  })

  const setTheme = (value) => {
    theme = value
    localStorage.theme = theme
  }
</script>

<button
  type="button"
  on:click={() => setTheme(theme === "dark" ? "light" : "dark")}
>
  {#if theme}
    {theme === "dark" ? "IconMoon" : "IconSun" }
  {/if}
</button>

Answer 1

You could do something like this:

<script>
    import { onMount } from 'svelte';
    import Child from './child.svelte';

    let show = false;
    onMount(() => show = true);
</script>

<div style:display={show ? 'contents' : 'none'}>
    <Child />
</div>

onMount will execute on the child components first, then on the parent.