Feat: Added Waiter addon

packages/open-scd/.eslintrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'import', 'html'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+  ],
+  rules: {
+    // disable the rule for all files
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'import/named': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': ['error', 'always', { ignorePackages: true }],
+    'import/no-duplicates': 'off',
+    'no-duplicate-imports': 'off',
+    'tsdoc/syntax': 'warn'
+  },
+};

packages/open-scd/src/addons/Waiter.ts

@@ -0,0 +1,55 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+
+import '@material/mwc-linear-progress';
+
+import { PendingStateDetail } from '../foundation.js';
+
+@customElement('oscd-waiter')
+export class OscdWaiter extends LitElement {
+  /** Whether the element is currently waiting for some async work. */
+  @property({ type: Boolean })
+  waiting = false;
+
+  private work: Set<Promise<void>> = new Set();
+
+  /** A promise which resolves once all currently pending work is done. */
+  workDone = Promise.allSettled(this.work);
+
+  private async onPendingState(e: CustomEvent<PendingStateDetail>) {
+    this.waiting = true;
+    this.work.add(e.detail.promise);
+    this.workDone = Promise.allSettled(this.work);
+    await e.detail.promise.catch(reason => console.warn(reason));
+    this.work.delete(e.detail.promise);
+    this.waiting = this.work.size > 0;
+  }
+
+  constructor() {
+    super();
+    this.onPendingState = this.onPendingState.bind(this);
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('pending-state', this.onPendingState);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('pending-state', this.onPendingState);
+  }
+
+  render(): TemplateResult {
+    return html`<slot></slot>
+      <mwc-linear-progress
+        .closed=${!this.waiting}
+        indeterminate
+      ></mwc-linear-progress>`;
+  }
+}

packages/open-scd/src/open-scd.ts

@@ -17,14 +17,15 @@ import { Hosting } from './Hosting.js';
 import { Historing } from './Historing.js';
 import { Plugging } from './Plugging.js';
 import { Setting } from './Setting.js';
-import { Waiting } from './Waiting.js';
 import { Wizarding } from './Wizarding.js';
 
+import './addons/Waiter.js';
+
 /** The `<open-scd>` custom element is the main entry point of the
  * Open Substation Configuration Designer. */
 @customElement('open-scd')
-export class OpenSCD extends Waiting(
-  Hosting(Setting(Wizarding(Plugging(Editing(Historing(LitElement))))))
+export class OpenSCD extends Hosting(
+  Setting(Wizarding(Plugging(Editing(Historing(LitElement)))))
 ) {
   private currentSrc = '';
   /** The current file's URL. `blob:` URLs are *revoked after parsing*! */
@@ -88,7 +89,8 @@ export class OpenSCD extends Waiting(
   }
 
   render(): TemplateResult {
-    return html` ${super.render()} ${getTheme(this.settings.theme)} `;
+    return html`<oscd-waiter>${super.render()}</oscd-waiter>
+      ${getTheme(this.settings.theme)} `;
   }
 
   static styles = css`

packages/open-scd/src/wizards/foundation/references.ts

@@ -6,7 +6,7 @@ import {
 } from '../../foundation.js';
 
 const referenceInfoTags = ['IED', 'Substation', 'VoltageLevel', 'Bay'] as const;
-type ReferencesInfoTag = typeof referenceInfoTags[number];
+type ReferencesInfoTag = (typeof referenceInfoTags)[number];
 
 type FilterFunction = (
   element: Element,