Merge pull request #161 from universal-ember/add-pending-state-to-page-component

Add `<:pending>` block to the `<Page>` component

Author: NullVoxPopuli

Diff for: docs-app/src/templates/page.gjs

@@ -10,6 +10,12 @@ function removeLoader() {
 export default Route(
   <template>
     <Page>
+      <:pending>
+        <div class="loading-page">
+          Loading, compiling, etc
+        </div>
+      </:pending>
+
       <:error as |error|>
         <div style="border: 1px solid red; padding: 1rem;" data-page-error>
           {{error}}
@@ -23,5 +29,14 @@ export default Route(
       </:success>
 
     </Page>
+    <style>
+      .loading-page {
+        position: fixed;
+        top: 3rem;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.8);
+        color: black;
+      }
+    </style>
   </template>
 );

Diff for: src/browser/components/page.gts

@@ -28,6 +28,27 @@ export class Page extends Component<{
      * ```
      */
     error: [error: string];
+
+    /**
+     * Before the document is compiled (or errored), this block will be active.
+     *
+     * Example:
+     *
+     * ```gjs
+     * import { Page } from 'kolay/components';
+     *
+     * <template>
+     *   <Page>
+     *     <:pending>
+     *        Loading State
+     *     </:pending>
+     *     <:success></:success>
+     *   </Page>
+     * </template>
+     * ```
+     */
+    pending: [];
+
     /**
      * If compilation of the active page was successful, the `<:success>` black
      * will be active, and will pass the component reference to the caller.
@@ -56,6 +77,10 @@ export class Page extends Component<{
       {{yield this.selected.error to='error'}}
     {{/if}}
 
+    {{#if this.selected.isPending}}
+      {{yield to='pending'}}
+    {{/if}}
+
     {{#if this.selected.prose}}
       {{yield this.selected.prose to='success'}}
     {{/if}}

Diff for: src/browser/services/kolay/selected.ts

@@ -78,6 +78,10 @@ export default class Selected extends Service {
     return this.proseCompiled.isReady;
   }
 
+  get isPending() {
+    return !this.isReady;
+  }
+
   get hasError() {
     return Boolean(this.proseCompiled.error) || this.request.hasError;
   }