From bc1b6fb84d6f135772378922b9fd20871ccc15ff Mon Sep 17 00:00:00 2001
From: Jacob Mischka <jacob@mischka.me>
Date: Tue, 25 Apr 2023 15:11:13 -0500
Subject: [PATCH 1/2] Add ctx.loading to PageCtx and support to page handlers

Still needs some UI work to normalize the different types of loading
components.

Closes T-888
---
 src/classes/IntervalClient.ts | 20 ++++++++++++++++++++
 src/examples/basic/index.ts   |  7 +++++++
 src/index.ts                  |  2 +-
 src/types.ts                  |  2 +-
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/classes/IntervalClient.ts b/src/classes/IntervalClient.ts
index 44d0db2..0f4d812 100644
--- 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
index 905a485..0b4434c 100644
--- a/src/examples/basic/index.ts
+++ b/src/examples/basic/index.ts
@@ -413,7 +413,14 @@ const prod = new Interval({
     async_page_test: new Page({
       name: 'Async page test',
       handler: async () => {
+        await sleep(10_000)
+
+        await ctx.loading.start('Generating page...')
+
+        await sleep(10_000)
+
         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
index 8fd1750..6a40655 100644
--- 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
index abec530..df29f80 100644
--- 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.

From 74f49b50ec8efccf678310fcc24f41ec6dfdcf87 Mon Sep 17 00:00:00 2001
From: Jacob Mischka <jacob@mischka.me>
Date: Wed, 26 Apr 2023 13:33:19 -0500
Subject: [PATCH 2/2] Adjust loader UI spacing for consistency between types

---
 src/examples/basic/index.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/examples/basic/index.ts b/src/examples/basic/index.ts
index 0b4434c..294dd30 100644
--- a/src/examples/basic/index.ts
+++ b/src/examples/basic/index.ts
@@ -413,11 +413,21 @@ const prod = new Interval({
     async_page_test: new Page({
       name: 'Async page test',
       handler: async () => {
-        await sleep(10_000)
+        await sleep(2_000)
 
         await ctx.loading.start('Generating page...')
 
-        await sleep(10_000)
+        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)