Loading

Small inline spinner. Raw Arco passthrough — distinct from the full-screen route loader.

Loading is the kit's re-export of @arco-design/mobile-react's Loading — a small inline spinner for transient states like "submitting", "fetching", or progress inside a button / row.

For full-screen route loaders (e.g. while a page's primary data is fetching) use LayoutLoading instead — it owns the whole content area, sets aria-busy, and pairs with Layout's screenState.isLoading.

import { Body2, Flex, Loading } from "@appboxo/ui-kit"

import { PreviewLayout, Row, Section } from "./_section"

export function LoadingDefaultPreview() {
  return (
    <PreviewLayout>
      <Section
        title="Loading"
        description="Raw Arco Mobile Loading passthrough — small inline spinner. For the kit's full-screen route loader use LayoutLoading instead."
      >
        <Row label="Inline">
          <Flex vertical={false} gap={12} align="center">
            <Loading />
            <Body2 color="text-3">Fetching latest passes…</Body2>
          </Flex>
        </Row>

        <Row label="Bigger">
          <Flex
            vertical
            align="center"
            justify="center"
            gap={12}
            style={{
              padding: 32,
              background: "var(--fill-1)",
              borderRadius: 16,
            }}
          >
            <Loading radius={20} />
            <Body2 color="text-3">Confirming payment…</Body2>
          </Flex>
        </Row>
      </Section>
    </PreviewLayout>
  )
}

API

Accepts every Arco LoadingProps prop verbatim. See the Arco Mobile React Loading docs for the full API.

import { Loading } from "@appboxo/ui-kit"

Common props: radius (spinner size), color, className.

Installation

pnpm add @appboxo/ui-kit

Toast TouchCell

On This Page

API Installation

Build mini-apps with Boxo

Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.