import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Spinner</Title>

    The Spinner Component is a UI element used to indicate that an application is loading or processing data.
    Spinners are commonly used to provide feedback to the user when an action or request is being processed.
    This allows the user to know that the application is still working and that they should wait for the result.

    <Subtitle>Usage</Subtitle>

    - Use the Spinner component to indicate to the user that something is happening behind the scenes, such as a long-running process or data retrieval.
    - Use the Spinner component to indicate to the user that something is happening behind the scenes, such as a long-running process or data retrieval.
    - Use the Spinner component when the user has initiated an action that will take some time to complete, such as submitting a form or retrieving large amounts of data.
    - Use the Spinner component sparingly and only when necessary. Overuse of the Spinner component can be distracting and frustrating to the user.
    - Use a clear and concise message to accompany the Spinner component, such as "Loading" or "Please wait".

    <Subtitle>👍 When to use</Subtitle>

    - When the user initiates an action that will take some time to complete.
    - When data is being retrieved or processed in the background.
    - When there is a delay in the application's response time.

    <Title>Properties</Title>

    <ArgTypes of="bq-spinner" />
  </div>
</div>
