Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • General: Loading and refreshing
    1. Cloudscape Design System
    2. Patterns
    3. General: Loading and refreshing

    Loading and refreshing

    Loading and refreshing is used to refresh collections of data in the interface.

    Published: June 8, 2020
    View demo

    On this page

    1. Key UX concepts
    2. Manual refresh
    3. Loading
    4. General guidelines
    5. Writing guidelines
    6. Accessibility guidelines

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Key UX concepts

    Loading and refreshing

    Loading is the process of bringing data or content into an application or a web page. For example, loading at first page visit to make information available to users. Refreshing is the action of updating or reloading the current state of a system or application. It can be done manually by a user or automatically by the system, to ensure that the displayed information is current and up-to-date.

    Refresh types

    Refresh can be applied in scenarios when data is fetched from the backend, such as in a collection view, within a data list.

    • Manual refresh is triggered by user interaction, via a button, ensuring control over when the data is updated. For example, a table with a large data set where users need to perform actions on several resources.

    • Automatic refresh is achieved by refreshing the data set at predefined intervals, for example 10 seconds, offering real-time updates and continuous synchronization with the dataset. For example, a select where the list represents resources created across consoles.

    Choose the best refresh type depending on your use-case, user needs, and API type.

    Manual refresh

    Successful refresh

    You can include a refresh button as part of the header, for example in a table. Keep the dataset visible while the refresh operation is ongoing, and enable users to perform actions on the resources. Once the data set is refreshed, display a timestamp to provide users with information on the outcome of the operation.

    Resources

    Last updated
    December 21, 2023, 14:29 (UTC+01:00)

    Variable name
    Current value
    Description
    Item 1
    First
    This is the first item
    Item 2
    Second
    This is the second item
    Item 3
    Third
    This is the third item
    Item 4
    Fourth
    This is the fourth item
    Item 5
    Fifth
    This is the fifth item
    Item 6
    Sixth
    This is the sixth item

    Refreshing issues

    Sometimes refreshing can take longer than expected or fail for some resources due to, for example, availability zone outages. When refreshing can’t be completed within 1-10 seconds, communicate that the process is taking longer by using a status indicator next to the refresh button.

    • If the API call returns issues with the refreshing, use a pending status indicator to inform users. Include in the popover additional information to explain the issues, such as longer time required to perform the refresh.

    • If the API call returns partial or total failure of the refreshing, use a warning status indicator to inform users. Include in the popover additional information to explain the failure and provide actions to support users, such as retry or filter out affected availability zones.

    Resources

    Refreshing table content
    Variable name
    Current value
    Description
    Item 1
    First
    This is the first item
    Item 2
    Second
    This is the second item
    Item 3
    Third
    This is the third item
    Item 4
    Fourth
    This is the fourth item
    Item 5
    Fifth
    This is the fifth item
    Item 6
    Sixth
    This is the sixth item

    Resources

    Variable name
    Current value
    Description
    Item 1
    First
    This is the first item
    Item 2
    Second
    This is the second item
    Item 3
    Third
    This is the third item
    Item 4
    Fourth
    This is the fourth item
    Item 5
    Fifth
    This is the fifth item
    Item 6
    Sixth
    This is the sixth item

    Form controls

    You can include a refresh button next to a form control, for example a select, to update the data set with the latest information. If an error occurs, display an error message to communicate the status.

      Loading

      Loading is the process of making information available to users, for example at first page visit. In a collection view a table in a loading state is used to indicate that the entire data set is being retrieved, and the page will be populated with available data.

      Resources

      Variable name
      Current value
      Description
      Loading resources

      Loading issues

      Sometimes loading can fail unexpectedly, for example, due to server errors, request time-out, or network issues. To notify of a data fetching error, use an alert inside the table. When using progressive loading in a table, if the loading fails, use an error status indicator with the reason for the error within a popover to communicate the status.

      Form controls

      In a form control, for example a select, a loading state is used to communicate that the entire data set is being retrieved.

        General guidelines

        Do

        • For manual refresh, include the refresh button as part of the header actions. Include a timestamp to inform users on the outcome of the refresh operation.

        Don't

        • Don't add refresh buttons in the interface, except when users need to perform an explicit action to refresh only a part of the interface.

        Writing guidelines

        General writing guidelines

        • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

        • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

        • Use present-tense verbs and active voice.

        • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

        • Avoid directional language.

          • For example: use previous not above, use following not below.

        • Use device-independent language.

          • For example: use choose or select not click.

        Component-specific guidelines

        Loading message

        • Don't use articles (a, an, the).

        • Don't use end punctuation.

        Popover

        • Follow the guidelines for popover.

        Table

        • Follow the guidelines for table.

        Select

        • Follow the guidelines for select.

        Status indicator

        • Follow the guidelines for status indicator.

        Accessibility guidelines

        General accessibility guidelines

        • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

        • Make sure to define ARIA labels aligned with the language context of your application.

        • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

        • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

        Component-specific guidelines

        • When using a refresh button, make it accessible by providing a label (aria-label). Describe the refresh action by setting the ariaLabel property in the button component. Also set the loadingText property to communicate the loading state.

        • Use an ARIA live region to announce updates to the last refresh timestamp.

        Did this page help you?

        Tell us more - optional

        1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
        • About
        • Connect
        • Privacy 
        • Site terms 
        • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
        Made with love atAWS