@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/{patterns-loading-docs.md → components_patterns-loading-docs.md}

@@ -1,5 +1,5 @@
-[](#loading)Loading
-===================
+Loading
+=======
 
 Overview
 --------
@@ -10,14 +10,27 @@ The loading pattern is used to indicate that content is being loaded or processe
 
 Beta
 
-New component
+**New component**
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
 
-Hide codeRefresh
+[](./iframe.html?id=patterns-loading--wizard)
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandboxRefresh
 
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -163,10 +176,13 @@ export const LoadingWizard \= () \=> {
   );
 };
 
-Copy
+```
 
-[](#usage)Usage
----------------
+Props
+-----
+
+Usage
+-----
 
 The main prop for the `IressLoading` component is the `pattern` prop. This prop determines the type of loading pattern to be used. The available options are:
 
@@ -194,19 +210,19 @@ The main prop for the `IressLoading` component is the `pattern` prop. This prop
 
 It is **recommended** to read the Patterns section of the documentation to understand how to use the loading patterns effectively.
 
-### [](#be-consistent)Be consistent
+### Be consistent
 
 Apart from using the `IressLoading` component, there are a few things you need to do to ensure you are using the loading patterns correctly to ensure consistency across Iress products.
 
 *   Consider the difference between what the system is doing and what the user is doing. For example, when a user is submitting a form, the system may be calling different APIs and you may be tempted to use the different loading patterns for each API. However, the user is only submitting the form once, so you should only use one loading pattern for the entire form submission process. In most cases, it will be the `page` loading pattern.
 *   When switch between different applications, consider using the same loading pattern. This will help mask the loading time and improve the user experience.
 
-[](#behaviour)Behaviour
------------------------
+Behaviour
+---------
 
 The `IressLoading` component is designed to create a seamless experience for users when loading content. They have been designed to meet best practices and improve user perception of loading times.
 
-![Wait times less than 1 second, no loading indicator. Short wait times (1-3 seconds), use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/@fs/app/packages/components/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
+![Wait times less than 1 second, no loading indicator. Short wait times (1-3 seconds), use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
 
 Image © [UX Collective](https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a)
 
@@ -228,21 +244,21 @@ In future releases, we will be adding support for the following:
 
 The `IressLoading` patterns have been built using `IressSkeleton`, `IressSpinner` and `IressProgressBar` and other components, reducing the need to create custom loading components.
 
-[](#patterns)Patterns
----------------------
+Patterns
+--------
 
-### [](#component)`component`
+### `component`
 
 The `component` loading pattern is used to indicate that a specific component is loading. It is typically used when the there is a slower component on the page that requires its own loading state. You would usually use this pattern when loading data visualisations such as charts and tables.
 
-#### [](#behavior)Behavior
+#### Behavior
 
 1.  When `loaded` is false, a skeleton will be displayed immediately (configured using `timeout.skeleton`). This skeleton can be customised using the `template` prop.
 2.  When `loaded` is true, the skeleton will be removed and the `children` will be displayed.
 3.  When `updated` is true, the `children` will be faded out to indicate the component is loading.
 4.  After 1000ms (configured using `timeout.update`), the `Updating...` message will be fade in. This message can be customised using the `updated` prop.
 
-#### [](#custom-skeletons)Custom skeletons
+#### Custom skeletons
 
 The skeleton representing the component should be as simple as possible, it does not need to be a perfect representation of the component. In most cases a simple rectangle is sufficient that takes up the approximate same space as the component that is loading.
 
@@ -250,18 +266,21 @@ The skeleton representing the component should be as simple as possible, it does
 
 Beta
 
-New component
+**New component**
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
 
-![](/@fs/app/packages/components/src/patterns/Loading/mocks/retirement-graph.png)
+[](./iframe.html?id=patterns-loading-patterns-component--component)
 
-Update
+![](/src/patterns/Loading/mocks/retirement-graph.png)
 
-Hide codeRefresh
+Update
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandboxRefresh
 
+import { IressButton, IressLoading, IressStack } from '@/main';
+import { useCallback, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 const API \= {
   chart: async () \=>
     new Promise<boolean\>((resolve) \=> {
@@ -320,15 +339,91 @@ export const LoadingGraph \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+The chart that is being loaded for the first time or being refreshed/updated.
+
+ReactNode
+
+
+
+ | \- | \- |
+| loaded | 
+
+If set to `true`, will hide the skeleton and display the chart.
+
+boolean
+
+
+
+ | \- | \- |
+| pattern | 
+
+Use `pattern="component"` for the following use cases:
+
+*   Component that is expected to be slow to load, such as a chart, table or large graphic.
+*   Component that can be refreshed/updated with new data.
+
+literal
+
+
+
+ | \- | \- |
+| screenReaderText | 
+
+Only screen readers will see this message, it is changed to the `message` after the delay.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | \- |
+| template | 
+
+Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+
+union
+
+
+
+ | 
+
+'chart'
+
+ | \- |
+| timeout | 
+
+Set the timeouts for showing the skeleton and update messages.
+
+{ /\*\* \* The time in milliseconds before the skeleton is displayed. \* @default 0 \*/ skeleton?: number; /\*\* \* The time in milliseconds before the update message is displayed. \* @default 1000 \*/ update?: number; }
+
+ | \- | \- |
+| update | 
+
+Set the chart to be updated. If a `ReactNode` is provided, it will be displayed as the message. If set to `true`, will display the default message `Updating...`.
+
+ReactNode
+
+
+
+ | \- | \- |
 
-### [](#default)`default`
+### `default`
 
 The `default` loading pattern is used when no other pattern matches a scenario, and will only indicate loading if something is taking a long time to load. It is used when long loading times are not expected.
 
 This pattern is used when the user is navigating between different pages or sections of the application.
 
-#### [](#behavior-1)Behavior
+#### Behavior
 
 1.  Displays nothing by default
     
@@ -339,27 +434,86 @@ This pattern is used when the user is navigating between different pages or sect
 
 Beta
 
-New component
+**New component**
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
 
-This is taking longer than expected...
+[](./iframe.html?id=patterns-loading-patterns-default--default)
 
-Hide codeRefresh
+This is taking longer than expected...
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading pattern\="default" />
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Message to display when the loading time is longer than expected.
+
+ReactNode
+
+
+
+ | 
+
+<IressInline />
+
+ | Set object |
+| pattern | 
+
+Do not set the `pattern` prop when no other pattern can be applied. It will only show the loading message after a delay, and is intended for use when loading is not expected to take a long time. Example use cases:
+
+*   Navigating between different routes
+*   Calling an API within the page that does not require a loading state
+
+literal
+
+
+
+ | \- | 
+
+"default"
+
+ |
+| screenReaderText | 
+
+Only screen readers will see this message, it is changed to the `children` message after the delay.
+
+ReactNode
+
+
 
-### [](#long)`long`
+ | 
+
+'Loading...'
+
+ | Set object |
+| timeout | 
+
+Delay in milliseconds before the message is displayed.
+
+number
+
+
+
+ | 
+
+3000
+
+ | Set number |
+
+### `long`
 
 The `long` loading pattern is used to indicate an expected long loading time, usually longer than 10 seconds to complete. It is typically used when calling multiple third-party APIs, AI generation and other long running tasks.
 
 It has a required prop, `messageList`, which is an object map where the key is the time you want the message to be marked as completed and the value is the message to display. The messages will be completed (checked off) as the time elapses.
 
-#### [](#behavior-2)Behavior
+#### Behavior
 
 1.  When `loaded` is false, a progress bar and check list will be displayed after 500ms (configured using `timeout.message`). This progress bar can be customised using the `renderProgress` prop.
 2.  The messages will rotate until the `loaded` prop is set to true.
@@ -368,7 +522,7 @@ It has a required prop, `messageList`, which is an object map where the key is t
 3.  When `loaded` is true, all items in the checklist are completed and the progress bar and message will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
 4.  When `error` is true, the error message will be displayed, overriding the progress bar and checklist. This message can be customised using the `error` prop. The error message will be displayed with a red background.
 
-#### [](#adjusting-the-progress-bar)Adjusting the progress bar
+#### Adjusting the progress bar
 
 The `long` loading pattern uses a progress bar to indicate that the application is loading alongside an `estimatedFinishTime` prop. This prop is used to indicate the estimated time until the application is fully loaded, and is used to help the user understand how long they will need to wait and assure them something is happening. The progress bar will animate based on the estimated time.
 
@@ -380,17 +534,17 @@ Once the `loaded` prop is set to true, the progress bar will always be set to 10
 
 Beta
 
-New component
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+[](./iframe.html?id=patterns-loading-patterns-long--long)
 
 *   Finished: Processing transcript
 *   Finished: Noting key information
 *   Finished: Generating summary...
 
-Hide codeRefresh
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   messageList\={{
@@ -401,19 +555,130 @@ Hide codeRefresh
   pattern\="long"
 />
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The children are displayed while loading. This will be displayed above the progress bar and checklist.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| error | 
+
+An error to display if the loading fails. This will override the `messageList` and show an error message instead.
+
+ReactNode
+
 
-### [](#page)`page`
+
+ | \- | Set object |
+| estimatedFinishTime | 
+
+Estimated time in milliseconds for the loading to finish.
+
+number
+
+
+
+ | 
+
+10000
+
+ | Set number |
+| loaded | 
+
+If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| messageList | 
+
+A checklist to display while loading. The key is the time when you want the item to be checked.
+
+Record<number, ReactNode>
+
+ | { } | 
+
+Edit JSON
+
+messageList :
+
+{
+
+*   3000 : "Processing transcript"
+*   5000 : "Noting key information"
+*   7000 : "Generating summary"
+
+}
+
+
+
+
+
+
+
+ |
+| pattern | 
+
+The long loading pattern will display a checklist of items that are being loaded.
+
+Use `pattern="long"` for the following use cases:
+
+*   Calling multiple slow APIs to load data
+*   Loading results from AI
+*   Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
+
+literal
+
+
+
+ | \- | 
+
+"long"
+
+ |
+| progress | 
+
+If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+
+IressProgressProps\['value'\]
+
+ | \- | Set object |
+| renderProgress | 
+
+This is a render prop that allows you to override the default progress rendering. This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+
+( props: Pick< IressProgressProps, 'className' | 'min' | 'max' | 'sectionTitle' | 'value' >, ) => ReactNode
+
+ | (props) => <IressProgress {...props} /> | \- |
+| timeout | 
+
+Set the timeouts for showing the progress bar and message.
+
+{ /\*\* \* The time in milliseconds before this component begins to fade out (if \`loaded\` is set to \`true\`). \* @default 1300 \*/ loaded?: number; /\*\* \* The time in milliseconds before the checklist is displayed. \* @default 500 \*/ message?: number; }
+
+ | \- | Set object |
+
+### `page`
 
 The `page` loading pattern is used to indicate that a page is loading. It is the most common loading pattern, allowing the users to see the entire content at once where possible.
 
-#### [](#behavior-3)Behavior
+#### Behavior
 
 1.  When `loaded` is false, a skeleton will be displayed after 500ms (configured using `timeout`). This skeleton can be customised using the `template` prop.
 2.  If `critical` is set whilst `loaded` is false, the critical content will be displayed immediately. This is useful for showing critical content while the rest of the page is loading.
 3.  When `loaded` is true, the skeleton will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
 
-#### [](#custom-skeletons-1)Custom skeletons
+#### Custom skeletons
 
 The skeleton does not need to be a perfect representation of the page. It is recommended to follow the guidelines below when creating custom `template` skeletons:
 
@@ -423,7 +688,7 @@ The skeleton does not need to be a perfect representation of the page. It is rec
 
 For your convenience, we have provided a few templates that you can use in the `template` prop, including: `page`, `form` and `dashboard`.
 
-#### [](#critical-content)Critical content
+#### Critical content
 
 In some cases it may be useful to show critical content while the rest of the page is loading. This gives the user a preview of what to expect. The example below shows a loading page with critical content by using the `critical` prop.
 
@@ -431,9 +696,11 @@ In some cases it may be useful to show critical content while the rest of the pa
 
 Beta
 
-New component
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+[](./iframe.html?id=patterns-loading-patterns-page--page)
 
 Dashboard
 =========
@@ -448,10 +715,21 @@ Dashboard
 
 Loading...
 
-Hide codeRefresh
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressCard,
+  IressCol,
+  IressContainer,
+  IressDivider,
+  IressInline,
+  IressLoading,
+  IressRow,
+  IressSkeleton,
+  IressStack,
+  IressText,
+} from '@/main';
+import { type ReactNode, useEffect, useState } from 'react';
 const API \= {
   criticalContent: async () \=>
     new Promise<ReactNode\>((resolve) \=> {
@@ -517,20 +795,94 @@ export const LoadingDashboard \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| critical | 
+If provided, will switch the skeleton to this template. Use when you have critical content that can be displayed while loading to allow the user to see some content while the rest is loading.
+
+ReactNode
+
+
+
+ | \- | \- |
+| loaded | 
+
+If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+
+boolean
+
+
+
+ | \- | \- |
+| pattern | 
+
+Use `pattern="page"` for the following use cases:
+
+*   Detail page for a record
+*   Form page
+*   Article page
+
+literal
+
+
+
+ | \- | \- |
+| screenReaderText | 
+
+Only screen readers will see this message.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | \- |
+| template | 
+
+Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+
+union
+
+
+
+ | 
+
+'page'
+
+ | \- |
+| timeout | 
+
+Delay in milliseconds before the skeleton is displayed.
+
+number
+
 
-### [](#start-up)`start-up`
+
+ | 
+
+500
+
+ | \- |
+
+### `start-up`
 
 The `start-up` loading pattern is used to indicate that the application is loading. It is typically used when the application is first launched. This pattern is used when the application is first launched or when switching from a different application to a new application. It is also used when switching from a client's website to an Iress application or switching themes.
 
-#### [](#behavior-4)Behavior
+#### Behavior
 
 1.  When `loaded` is false, a progress bar will be displayed after 500ms (configured using `timeout.progress`). This progress bar can be customised using the `renderProgress` prop.
 2.  When `loaded` is false after 2.5 seconds (configured using `timeout.message`), the message will be displayed. This message can be customised using the `children` or `messageList` prop.
 3.  If using `messageList`, the messages will rotate until the `loaded` prop is set to true.
 4.  When `loaded` is true, the progress bar and message will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
 
-#### [](#adjusting-the-progress-bar-1)Adjusting the progress bar
+#### Adjusting the progress bar
 
 The `start-up` loading pattern uses a progress bar to indicate that the application is loading alongside an `estimatedFinishTime` prop. This prop is used to indicate the estimated time until the application is fully loaded, and is used to help the user understand how long they will need to wait and assure them something is happening. The progress bar will animate based on the estimated time.
 
@@ -538,7 +890,7 @@ If your application is capable of calculating real progress, you can pass the `p
 
 Once the `loaded` prop is set to true, the progress bar will always be set to 100% and the loading pattern will fade out.
 
-#### [](#rotating-messages)Rotating messages
+#### Rotating messages
 
 The start-up process is often used initialise the application and load any necessary data. This can include loading user preferences, settings, and any other data that is required to make using the application quicker and easier, however this may add burden to the loading time.
 
@@ -548,13 +900,13 @@ To compensate for this, you can pass multiple messages to the pattern using the
 
 Beta
 
-New component
+**New component**
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
 
-Hide codeRefresh
+[](./iframe.html?id=patterns-loading-patterns-startup--start-up)
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   messageList\={{
@@ -564,19 +916,142 @@ Hide codeRefresh
   pattern\="start-up"
 />
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Message to display when the loading time is longer than expected.
+
+ReactNode
+
+
+
+ | 
+
+<IressText />
+
+ | Set object |
+| estimatedFinishTime | 
+
+Estimated time in milliseconds for the loading to finish.
+
+number
+
+
+
+ | 
+
+3000
+
+ | Set number |
+| loaded | 
+
+If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| messageList | 
+
+A message list to display while loading. The key is the time when you want the message to change to this message. If using a message list, the `children` will not be displayed.
+
+Record<number, ReactNode>
+
+ | \- | 
+
+Edit JSON
+
+messageList :
+
+{
+
+*   0 :
+    
+    {...} 6 keys
+    
+*   4500 :
+    
+    {...} 6 keys
+    
+
+}
+
+
+
+
+
+
 
-### [](#validate)`validate`
+ |
+| pattern | 
+
+Use `pattern="start-up"` for the following use cases:
+
+*   Loading an application for the first time
+*   Switching from a different application to a new application
+*   Switching from a client's website to an Iress application
+*   Switching themes
+
+literal
+
+
+
+ | \- | 
+
+"start-up"
+
+ |
+| progress | 
+
+If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+
+IressProgressProps\['value'\]
+
+ | \- | Set object |
+| renderProgress | 
+
+This is a render prop that allows you to override the default progress rendering. This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+
+( props: Pick< IressProgressProps, 'className' | 'min' | 'max' | 'sectionTitle' | 'value' >, ) => ReactNode
+
+ | (props) => <IressProgress {...props} /> | \- |
+| screenReaderText | 
+
+Only screen readers will see this message, it is changed to the `children` message after the delay.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | Set object |
+| timeout | 
+
+Set the timeouts for showing the progress bar and message.
+
+{ /\*\* \* The time in milliseconds before this component begins to fade out (if \`loaded\` is set to \`true\`). \* @default 200 \*/ loaded?: number; /\*\* \* The time in milliseconds before the message message is displayed. \* @default 2500 \*/ message?: number; /\*\* \* The time in milliseconds before the progress bar is displayed. \* @default 500 \*/ progress?: number; }
+
+ | \- | Set object |
+
+### `validate`
 
 The `validate` loading pattern is used to indicate that a server-side validation is in progress. It is typically used when the user is submitting a form or performing an action that requires validation and the user is not expected to leave the page.
 
-#### [](#behavior-5)Behavior
+#### Behavior
 
 1.  When `loading` is false, the button will be displayed immediately (customised using the `renderButton` prop, or the `children` prop if you do not mind passing in the `loading` prop twice).
 2.  When `loading` is true, the button will be disabled and a spinner will be displayed.
 3.  When `loading` is true after 2.5 seconds (configured using `timeout`), the message will be displayed. This message can be customised using the `message` prop. Its placement can be adjusted using the `position` prop.
 
-#### [](#message-position)Message position
+#### Message position
 
 Forms come in all shapes and sizes, and the `IressLoading` component is designed to be flexible enough to work with any form. The `position` prop allows you to adjust the placement of the loading message. The available options are:
 
@@ -588,27 +1063,120 @@ Forms come in all shapes and sizes, and the `IressLoading` component is designed
 
 Beta
 
-New component
+**New component**
 
-This component is new, please provide feedback to the IDS team if you encounter any issues.
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-validate--validate)
 
 Submit
 
 This is taking longer than expected...
 
-Hide codeRefresh
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   loading
   pattern\="validate"
 />
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| loading | 
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+IressButtonProps\['loading'\]
+
+ | 
+
+false
+
+ | 
+
+true
+
+ |
+| message | 
+
+Set the message to be displayed when the button is in the loading state.
+
+ReactNode
+
+
+
+ | 
+
+'This is taking longer than expected...'
+
+ | Set object |
+| pattern | 
+
+Use `pattern="validate"` for the following use cases:
 
-[](#suspense)Suspense
----------------------
+*   Submitting a form
+*   Saving a record
+
+literal
+
+
+
+ | 
+
+'validate'
+
+ | 
+
+"validate"
+
+ |
+| position | 
+
+This sets where the loading message will be displayed.
+
+*   `bottom` - The loading message will be displayed below the button. It will be absolute positioned.
+*   `top` - The loading message will be displayed above the button. It will be absolute positioned.
+*   `right` - The loading message will be displayed to the right of the button. It will be inline positioned.
+
+union
+
+
+
+ | 
+
+'bottom'
+
+ | 
+
+positionbottomtopright
+
+ |
+| renderButton | 
+
+This is a render prop that allows you to override the default button rendering. This is useful if you want to use a different button component or if you want to add additional props to the button.
+
+( props: Pick<IressButtonProps, 'className' | 'loading'>, ) => ReactNode
+
+ | (props: Pick<IressButtonProps, 'className' | 'loading'>) => ( <IressButton {...props} type="submit"> Submit </IressButton> ) | \- |
+| timeout | 
+
+The time in milliseconds before the loading message is displayed.
+
+number
+
+
+
+ | 
+
+2500
+
+ | Set number |
+
+Suspense
+--------
 
 Since React 18, React has introduced a new way to handle loading states using `Suspense`, allowing you to lazy load components in an efficient manner.
 
@@ -621,10 +1189,23 @@ The wizard example can be translated to use `IressLoadingSuspense` as follows (i
 *   The `IressLoadingSuspense` component will automatically handle the loading state for you, so you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook.
 *   Nested suspense components will be handled by the highest `IressLoadingSuspense` component. This means that if you have multiple nested `IressLoadingSuspense` components, only the top most one will display a loading state. You can see this in the example when you click the Next button, you no longer see the component loading pattern due to it being nested under the page loading pattern.
 
-Hide codeRefresh
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
+[](./iframe.html?id=patterns-loading-suspense--suspense)
+
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
+import { IressLoadingSuspense } from '../LoadingSuspense';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -756,12 +1337,63 @@ export const LoadingSuspenseWizard \= () \=> (
   </IressLoadingSuspense\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The content that will be rendered inside the Suspense boundary. Typically includes lazy-loaded components and components that use the `use` or `IressLoadingSuspense.use` hook.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Duration (in milliseconds) to delay unmounting the fallback to allow the fade-out animation to complete. By default it uses the default delay of the pattern.
+
+number
+
+
+
+ | \- | \- |
+| onLoaded | 
 
-Hide codeRefresh
+By default it uses the default delay of the pattern.
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+() => void
 
+ | \- | \- |
+| startFrom | 
+
+Duration (in milliseconds) before showing the loading pattern. Default is 500ms, meaning a user will not even see the loading indicator if the page loads before this time.
+
+number
+
+
+
+ | \- | \- |
+
+[](./iframe.html?id=patterns-loading-suspense--fast-suspense)
+
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
+import { IressLoadingSuspense } from '../LoadingSuspense';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -888,43 +1520,64 @@ export const LoadingSuspenseWizardFast \= () \=> (
   </IressLoadingSuspense\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The content that will be rendered inside the Suspense boundary. Typically includes lazy-loaded components and components that use the `use` or `IressLoadingSuspense.use` hook.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Duration (in milliseconds) to delay unmounting the fallback to allow the fade-out animation to complete. By default it uses the default delay of the pattern.
+
+number
+
+
+
+ | \- | \- |
+| onLoaded | 
+
+By default it uses the default delay of the pattern.
+
+() => void
 
-[](#hooks)Hooks
----------------
+ | \- | \- |
+| startFrom | 
 
-### [](#iressloadingshouldrender)`IressLoading.shouldRender`
+Duration (in milliseconds) before showing the loading pattern. Default is 500ms, meaning a user will not even see the loading indicator if the page loads before this time.
+
+number
+
+
+
+ | \- | \- |
+
+Hooks
+-----
+
+### `IressLoading.shouldRender`
 
 The `IressLoading.shouldRender` hook is used to determine whether the loading pattern should be displayed or not. It is used to control the visibility of the loading pattern based on the `loaded` prop.
 
 Its main function is to delay the un-mounting of the loading pattern when the `loaded` prop is set to true to allow for a fade out animation.
 
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
 const \[loaded, setLoaded\] \= useState(false);
 const renderLoading \= IressLoading.shouldRender(loaded);
 // Use renderLoading instead of !loaded for the smooth transition.
 if (renderLoading) return <IressLoading pattern\="page" loaded\={loaded} />;
 else return <IressText\>Content is loaded</IressText\>;
 
-Copy
+```
 
-### [](#iressloadingsuspenseuse)`IressLoadingSuspense.use`
+### `IressLoadingSuspense.use`
 
 The `IressLoadingSuspense.use` hook is a polyfill for the React 19 `use` hook, allowing you to have similar functionality in React 18. It is used to handle loading states when using `IressLoadingSuspense`.
 
@@ -935,23 +1588,6 @@ Avoid in React 19
 
 If you are using React 19, it is recommended to use the built-in `use` hook instead of this one. In future releases, this hook will be deprecated and removed from the library.
 
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
 const HomePage \= () \=> {
   const pageData \= IressLoadingSuspense.use(API.fetchPage('home'));
   return (
@@ -967,21 +1603,34 @@ export const App \= () \=> (
   </IressLoadingSuspense\>
 );
 
-Copy
+```
 
-[](#examples)Examples
----------------------
+Examples
+--------
 
 Below are some examples of how to use the `IressLoading` component in different scenarios.
 
-### [](#wizard)Wizard
+### Wizard
 
 Here you can see how a wizard can use the `IressLoading` component at different stages of the application. The first example shows a `slow` wizard, and the second example shows how the same code looks when the requests are fast. The main difference is you see minimal loading inidicators in the second example, improving the perception that the system is fast.
 
-Hide codeRefresh
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
+[](./iframe.html?id=patterns-loading--wizard)
+
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1127,12 +1776,27 @@ export const LoadingWizard \= () \=> {
   );
 };
 
-Copy
+```
 
-Hide codeRefresh
+#### Props
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+[](./iframe.html?id=patterns-loading--fast-wizard)
 
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1280,25 +1944,6 @@ export const LoadingWizardFast \= () \=> {
   );
 };
 
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Be consistent](#be-consistent)
-*   [Behaviour](#behaviour)
-*   [Patterns](#patterns)
-    *   [component](#component)
-    *   [default](#default)
-    *   [long](#long)
-    *   [page](#page)
-    *   [start-up](#start-up)
-    *   [validate](#validate)
-*   [Suspense](#suspense)
-*   [Hooks](#hooks)
-    *   [IressLoading.shouldRender](#iressloadingshouldrender)
-    *   [IressLoadingSuspense.use](#iressloadingsuspenseuse)
-*   [Examples](#examples)
-    *   [Wizard](#wizard)
+```
+
+#### Props