FirstVisibleChildLayout

import { FirstVisibleChildLayout } from 'cx/ui';

FirstVisibleChildLayout renders only the first visible child. It works like a complex if ... else ... statement, useful for displaying different content based on application state.

 <div controller={FetchController}>
  <FirstVisibleChildLayout>
    <div visible={equal(m.fetch.status, "LOADING")} style={{ color: "gray" }}>
      Loading...
    </div>
    <div visible={equal(m.fetch.status, "ERROR")} style={{ color: "red" }}>
      Error occurred while loading data.
    </div>
    <div
      visible={equal(m.fetch.status, "SUCCESS")}
      style={{ color: "green" }}
      text={tpl(m.fetch.result, "Success! Result: {0:n;2}")}
    />
    <div style={{ color: "gray" }}>Data not loaded yet.</div>
  </FirstVisibleChildLayout>
  <Button onClick="fetch" disabled={equal(m.fetch.status, "LOADING")}>
    Fetch
  </Button>
</div> 
 class FetchController extends Controller<PageModel> {
  fetch() {
    this.store.set(m.fetch.status, "LOADING");
    setTimeout(() => {
      if (Math.random() > 0.5) {
        this.store.set(m.fetch.status, "SUCCESS");
        this.store.set(m.fetch.result, Math.random() * 100);
      } else {
        this.store.set(m.fetch.status, "ERROR");
      }
    }, 1000);
  }
} 
 interface PageModel {
  fetch: {
    status: "LOADING" | "SUCCESS" | "ERROR";
    result: number;
  };
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Controller, FirstVisibleChildLayout, equal, tpl } from "cx/ui";
import { Button } from "cx/widgets"; 

Data not loaded yet.

Initially, fetch.status is undefined, so the first three div elements are not visible and the default message appears.

After clicking Fetch, the default message disappears and the loading message displays until the result is fetched. The default message disappears even without a visible condition because the layout stops processing after the first visible child is rendered.