(defcomp
  ()
  (~examples/page-content
    :title "Loading States"
    :description "sx.js adds the .sx-request CSS class to any element that has an active request. Use pure CSS to show spinners, disable buttons, or change opacity during loading."
    :demo-description "Click the button — it shows a spinner during the 2-second request."
    :demo (~examples/loading-states-demo)
    :sx-code ";; .sx-request class added during request\n(style \".sx-loading-btn.sx-request {\n  opacity: 0.7; pointer-events: none; }\n.sx-loading-btn.sx-request .sx-spinner {\n  display: inline-block; }\n.sx-loading-btn .sx-spinner {\n  display: none; }\")\n\n(button :class \"sx-loading-btn\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.slow))))\"\n  :sx-target \"#loading-result\"\n  (span :class \"sx-spinner animate-spin\" \"...\")\n  \"Load slow endpoint\")"
    :handler-names (list "ex-slow")
    :comp-placeholder-id "loading-comp"
    :wire-placeholder-id "loading-wire"))
