Loading, empty & error

The feedback states an agent needs while data is in flight: Skeleton placeholders, an EmptyState, an ErrorState whose retry dispatches an action, and a DetailPanel of key/value rows.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "loadingTitle",            "loading",            "emptyCard",            "errorCard",            "detail"          ],          "gap": "lg"        },        {          "id": "loadingTitle",          "component": "Text",          "text": "Loading",          "variant": "title-sm"        },        {          "id": "loading",          "component": "Column",          "children": [            "sk1",            "sk2",            "sk3"          ],          "gap": "sm"        },        {          "id": "sk1",          "component": "Skeleton",          "height": 16,          "width": "40%"        },        {          "id": "sk2",          "component": "Skeleton",          "height": 16        },        {          "id": "sk3",          "component": "Skeleton",          "height": 16,          "width": "70%"        },        {          "id": "emptyCard",          "component": "Card",          "child": "empty"        },        {          "id": "empty",          "component": "EmptyState",          "variant": "no-results",          "title": "No matching agents",          "description": "No agents match the current filters. Clear a filter to see more."        },        {          "id": "errorCard",          "component": "Card",          "child": "error"        },        {          "id": "error",          "component": "ErrorState",          "title": "Could not load the roster",          "description": "The request timed out after 30 seconds.",          "retryLabel": "Try again",          "action": {            "event": {              "name": "retry"            }          }        },        {          "id": "detail",          "component": "DetailPanel",          "title": "Ada Lovelace",          "closeAction": {            "event": {              "name": "close"            }          },          "rows": {            "path": "/fields"          }        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "fields": [          {            "label": "Role",            "value": "Principal Engineer"          },          {            "label": "Team",            "value": "Renderer"          },          {            "label": "Location",            "value": "London"          },          {            "label": "Status",            "value": "Active"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "loadingTitle",
            "loading",
            "emptyCard",
            "errorCard",
            "detail"
          ],
          "gap": "lg"
        },
        {
          "id": "loadingTitle",
          "component": "Text",
          "text": "Loading",
          "variant": "title-sm"
        },
        {
          "id": "loading",
          "component": "Column",
          "children": [
            "sk1",
            "sk2",
            "sk3"
          ],
          "gap": "sm"
        },
        {
          "id": "sk1",
          "component": "Skeleton",
          "height": 16,
          "width": "40%"
        },
        {
          "id": "sk2",
          "component": "Skeleton",
          "height": 16
        },
        {
          "id": "sk3",
          "component": "Skeleton",
          "height": 16,
          "width": "70%"
        },
        {
          "id": "emptyCard",
          "component": "Card",
          "child": "empty"
        },
        {
          "id": "empty",
          "component": "EmptyState",
          "variant": "no-results",
          "title": "No matching agents",
          "description": "No agents match the current filters. Clear a filter to see more."
        },
        {
          "id": "errorCard",
          "component": "Card",
          "child": "error"
        },
        {
          "id": "error",
          "component": "ErrorState",
          "title": "Could not load the roster",
          "description": "The request timed out after 30 seconds.",
          "retryLabel": "Try again",
          "action": {
            "event": {
              "name": "retry"
            }
          }
        },
        {
          "id": "detail",
          "component": "DetailPanel",
          "title": "Ada Lovelace",
          "closeAction": {
            "event": {
              "name": "close"
            }
          },
          "rows": {
            "path": "/fields"
          }
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "fields": [
          {
            "label": "Role",
            "value": "Principal Engineer"
          },
          {
            "label": "Team",
            "value": "Renderer"
          },
          {
            "label": "Location",
            "value": "London"
          },
          {
            "label": "Status",
            "value": "Active"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

No matching agents

No agents match the current filters. Clear a filter to see more.

Could not load the roster

The request timed out after 30 seconds.

RolePrincipal Engineer

TeamRenderer

LocationLondon

StatusActive