order of reactivity

export default function Orders() {

    const [displayMode, setDisplayMode] = createSignal("customer")
    const [orders] = createResource(displayMode, getOrders)


    const switchDisplayMode = () => {
        setDisplayMode(displayMode() == "customer" ? "product" : "customer")
        console.log(displayMode(), orders.loading)
    }


    return <div class="container mx-auto">
        <div class="h-30 py-4 [&>*]:mx-2">
            <Button variant="contained" color="success" href="/orders/new">New order</Button>
            <Button variant="contained" color="primary" onClick={switchDisplayMode}>{displayMode() == "customer" ? "Display by products" : "Display by customers"}</Button>
        </div>

        <Show when={displayMode() == "customer" && !orders.loading}>
            <ByCustomerTable orders={orders()} />
        </Show>

        <Show when={displayMode() == "product" && !orders.loading}>
            <ByProductTable orders={orders()} />
        </Show>

    </div>
}

export default function Orders() {

    const [displayMode, setDisplayMode] = createSignal("customer")
    const [orders] = createResource(displayMode, getOrders)


    const switchDisplayMode = () => {
        setDisplayMode(displayMode() == "customer" ? "product" : "customer")
        console.log(displayMode(), orders.loading)
    }


    return <div class="container mx-auto">
        <div class="h-30 py-4 [&>*]:mx-2">
            <Button variant="contained" color="success" href="/orders/new">New order</Button>
            <Button variant="contained" color="primary" onClick={switchDisplayMode}>{displayMode() == "customer" ? "Display by products" : "Display by customers"}</Button>
        </div>

        <Show when={displayMode() == "customer" && !orders.loading}>
            <ByCustomerTable orders={orders()} />
        </Show>

        <Show when={displayMode() == "product" && !orders.loading}>
            <ByProductTable orders={orders()} />
        </Show>

    </div>
}