feat: loading alert when async page component is loading

Signed-off-by: Sami Mazouz <[email protected]>
flarum · Jul 27, 2023 · dc2f81d · dc2f81d
1 parent a7bcfa4
commit dc2f81d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/...s/src/common/resolvers/DefaultResolver.ts → .../src/common/resolvers/DefaultResolver.tsx b/...s/src/common/resolvers/DefaultResolver.ts → .../src/common/resolvers/DefaultResolver.tsx
@@ -2,6 +2,8 @@ import type Mithril from 'mithril';
 import type { AsyncNewComponent, NewComponent, RouteResolver } from '../Application';
 import type { ComponentAttrs } from '../Component';
 import Component from '../Component';
+import app from '../app';
+import LoadingIndicator from '../components/LoadingIndicator';
 
 /**
  * Generates a route resolver for a given component.
@@ -40,8 +42,24 @@ export default class DefaultResolver<
     };
   }
 
-  async onmatch(args: RouteArgs, requestedPath: string, route: string): Promise<{ new (): Comp }> {
-    return this.component.prototype instanceof Component ? this.component : (await (this.component as AsyncNewComponent<Comp>)()).default;
+  async onmatch(args: RouteArgs, requestedPath: string, route: string): Promise<NewComponent<Comp>> {
+    if (this.component.prototype instanceof Component) {
+      return this.component as NewComponent<Comp>;
+    }
+
+    app.alerts.show(
+      {
+        type: 'warning',
+        dismissible: false,
+      },
+      <LoadingIndicator size="small" display="inline" />
+    );
+
+    const component = (await (this.component as AsyncNewComponent<Comp>)()).default;
+
+    app.alerts.clear();
+
+    return component;
   }
 
   render(vnode: Mithril.Vnode<Attrs, Comp>): Mithril.Children {

diff --git a/framework/core/less/common/Alert.less b/framework/core/less/common/Alert.less
@@ -3,6 +3,7 @@
   border-radius: var(--border-radius);
   line-height: 1.5;
 
+  --loading-indicator-color: var(--alert-color);
   background: var(--alert-bg);
 
   &,