Merge pull request #1235 from interval/page-loading

Add `ctx.loading` to PageCtx and support to page handlers
interval · Apr 27, 2023 · 4972019 · 4972019
2 parents 1b4f9e3 + 74f49b5
commit 4972019
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/src/classes/IntervalClient.ts b/src/classes/IntervalClient.ts
@@ -1409,6 +1409,26 @@ export default class IntervalClient {
           page: inputs.page,
           redirect: (props: LegacyLinkProps) =>
             intervalClient.#sendRedirect(pageKey, props),
+          loading: new TransactionLoadingState({
+            logger: intervalClient.#logger,
+            send: async loadingState => {
+              intervalClient.#transactionLoadingStates.set(
+                pageKey,
+                loadingState
+              )
+              if (this.#config.getClientHandlers) {
+                await this.#config.getClientHandlers()?.LOADING_STATE({
+                  transactionId: pageKey,
+                  ...loadingState,
+                })
+              } else {
+                await intervalClient.#send('SEND_LOADING_CALL', {
+                  transactionId: pageKey,
+                  ...loadingState,
+                })
+              }
+            },
+          }),
         }
 
         let page: Layout | undefined = undefined

diff --git a/src/examples/basic/index.ts b/src/examples/basic/index.ts
@@ -413,7 +413,24 @@ const prod = new Interval({
     async_page_test: new Page({
       name: 'Async page test',
       handler: async () => {
+        await sleep(2_000)
+
+        await ctx.loading.start('Generating page...')
+
+        await sleep(2_000)
+
+        await ctx.loading.start({
+          label: 'Generating rows...',
+          itemsInQueue: 100,
+        })
+
+        for (let i = 0; i < 100; i++) {
+          await ctx.loading.completeOne()
+          await sleep(100)
+        }
+
         const allData = generateRows(100)
+
         return new Layout({
           children: [
             io.display.table<ReturnType<typeof generateRows>[0]>(

diff --git a/src/index.ts b/src/index.ts
@@ -151,7 +151,7 @@ export const ctx: ActionCtx & PageCtx = {
   get user() { return getSomeStore().ctx.user },
   get params() { return getSomeStore().ctx.params },
   get environment() { return getSomeStore().ctx.environment },
-  get loading() { return getActionStore().ctx.loading },
+  get loading() { return getSomeStore().ctx.loading },
   get log() { return getActionStore().ctx.log },
   get organization() { return getSomeStore().ctx.organization },
   get action() { return getActionStore().ctx.action },

diff --git a/src/types.ts b/src/types.ts
@@ -162,7 +162,7 @@ export type ActionCtx = {
 
 export type PageCtx = Pick<
   ActionCtx,
-  'user' | 'params' | 'environment' | 'organization' | 'redirect'
+  'user' | 'params' | 'environment' | 'organization' | 'redirect' | 'loading'
 > & {
   /**
    * Information about the currently open page.