add loading indicator, inactive and banned indicators

src/pages/impl/player-page.ts

@@ -1,6 +1,6 @@
 import Page from "../page";
-import {getElement, getSvelteClass} from "../../common/page-utils";
-import {getPlayer, getPlayerIdFromUrl} from "../../common/player";
+import { getElement, getSvelteClass } from "../../common/page-utils";
+import { getPlayer, getPlayerIdFromUrl } from "../../common/player";
 
 export default class PlayerPage extends Page {
   constructor() {
@@ -8,16 +8,35 @@ export default class PlayerPage extends Page {
   }
 
   public async onLoad() {
+    let loadingElement;
+    let titleElement;
     try {
       // Wait for the title element to load, so we know the page is fully loaded
-      const titleElement = await getElement(".title.is-5.player.has-text-centered-mobile", 250);
+      titleElement = await getElement(
+        ".title.is-5.player.has-text-centered-mobile",
+      );
+      const id: string = getPlayerIdFromUrl();
 
-      const id = getPlayerIdFromUrl();
-      const player = await getPlayer(id);
+      loadingElement = await this.addLoadingElement(titleElement);
+      const player: any = await getPlayer(id);
+      loadingElement(); // Remove the loading element
 
       await this.addStats(player); // Add our custom stats
     } catch (error) {
-      console.error("Failed to load player page", error);
+      loadingElement(); // Remove the loading element
+
+      if (error.message.includes("inactive")) {
+        await this.addLoadingElement(
+          titleElement,
+          "This player is inactive, no extra data available",
+        );
+      }
+      if (error.message.includes("banned")) {
+        await this.addLoadingElement(
+          titleElement,
+          "This player is banned, no extra data available",
+        );
+      }
     }
   }
 
@@ -26,11 +45,11 @@ export default class PlayerPage extends Page {
    *
    * @param player the player to add stats for
    */
-  private async addStats(player: any) {
+  private async addStats(player: any): Promise<void> {
     await this.addStat(
       "+1 PP",
       `${player.rawPerGlobalPerformancePoints.toFixed(2)}pp`,
-      "Raw performance points to gain +1 global PP"
+      "Raw performance points to gain +1 global PP",
     );
   }
 
@@ -41,16 +60,53 @@ export default class PlayerPage extends Page {
    * @param value the value of the stat
    * @param hover the hover text of the stat
    */
-  private async addStat(stat: string, value: string, hover?: string) {
-    const statsContainer = await getElement(".stats-container");
-    const statElement = document.createElement("div");
-    const svelteClass = getSvelteClass(".stats-container");
+  private async addStat(
+    stat: string,
+    value: string,
+    hover?: string,
+  ): Promise<void> {
+    const statsContainer: HTMLElement = await getElement(".stats-container");
+    const statElement: HTMLDivElement = document.createElement("div");
+    const svelteClass: string = getSvelteClass(".stats-container");
 
     statElement.className = `stat-item ${svelteClass}`;
     statElement.innerHTML = `
       <span class="stat-title ${svelteClass}">${stat}</span>
       <span class="stat-spacer ${svelteClass}"></span>
       <span class="stat-content ${hover && "has-hover"} ${svelteClass}" ${hover && `title="${hover}"`}>${value}</span>`;
-    statsContainer.appendChild(statElement);
+    statsContainer.appendChild(statElement); // Add the stat to the stats container
   }
-}
+
+  /**
+   * Create a loading element to show the user
+   *
+   * @param element the element to append the loading element to
+   * @param text the text to show in the loading element
+   * @returns the loading element
+   */
+  private async addLoadingElement(
+    element: HTMLElement,
+    text: string = "Loading SSU data...",
+  ): Promise<() => void> {
+    const svelteClass: string = getSvelteClass(element.className);
+
+    // The divider element
+    const dividerElement: HTMLDivElement = document.createElement("div");
+    dividerElement.className = `divider ${svelteClass}`;
+
+    // The loading element
+    const loadingElement: HTMLSpanElement = document.createElement("span");
+    loadingElement.className = `title-header ${svelteClass} font-size: 1rem;`;
+    loadingElement.style.alignSelf = "flex-end";
+    loadingElement.innerHTML = `
+      <p>${text}</p>`;
+
+    element.appendChild(dividerElement);
+    element.appendChild(loadingElement);
+
+    return () => {
+      dividerElement.remove();
+      loadingElement.remove();
+    };
+  }
+}