The Stopgap is a page type used to provide customers with an interstitial loading or processing page.
The purpose of the Stopgap is to inform the customer that there is a temporary pause in their experience, whilst we action or process the information they have provided. It should be clear that this is the expected behaviour of the journey they are using.
This page type should provide a clear message to reassure the customer. If possible, we should set their expectations by providing them with a realistic time frame of how long they are likely to have to wait.
If closing or refreshing their browser window will result in failure, we must convey this message clearly.
<ns-landmark type="lakeside"><h1 slot="heading"><span class="h5">Nearly there.</span><span class="h1 enlighten">We're <b>processing</b> your order</span></h1><p slot="paragraph"><ns-icon type="loading" size="5"></ns-icon></p><p slot="paragraph">We are processing your payment and confirming your engineer appointment.</p><p slot="paragraph"> This may take up to <b>2 minutes</b>.</p><p slot="paragraph"><b>Please do not close your browser.</b></p></ns-landmark>
lakeside variant to display clear messaging.
loading within a
<p slot="paragraph"> to provide visual feedback that their action is being processed.
The copy must be in plain English, and help the user understand what is happening.
You should not use:
Generic messaging such as ‘Loading’ or ‘Processing’
An unrealistic or dishonest time frame length
Include additional content that could encourage them to abandon this page and potentially result in failure
Use for wait times in excess of 10 seconds
Use as a placeholder when loading in individual components
Use for end of journey processing and purchases
Rely on this page type instead of optimising your journey
Communicate the message in a clear and concise way as possible
Encourage the user to abandon if it would result in failure
Provide a transparent expectation of their wait time
Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the