Working spinner loading state

src/EventEmitter.ts

@@ -1,13 +1,13 @@
-export type EventHandler = () => void | Promise<void>;
+export type EventHandler<T> = (value: T) => void | Promise<void>;
 
-export class EventEmitter {
-    private listeners: EventHandler[] = [];
+export class EventEmitter<T = void> {
+    private listeners: EventHandler<T>[] = [];
 
-    public addListener(l: EventHandler) {
+    public addListener(l: EventHandler<T>) {
         this.listeners.push(l);
     }
 
-    public fire() {
-        this.listeners.forEach((h) => h());
+    public fire(value: T) {
+        this.listeners.forEach((h) => h(value));
     }
 }

src/content/add-billability-chart.ts

@@ -38,10 +38,12 @@ async function doAddBillabilityChart(date: Date, user: User) {
         chartContainer = createBillabilityCard(addTimePanel);
     }
 
+    updateLoadingState(true);
     const [times, company] = await Promise.all([
         getTimes(user.id, date, GET_TIMES_WEEKS),
         api.getCompany(),
     ]);
+    updateLoadingState(false);
 
     const settings = getSettings();
 
@@ -77,7 +79,8 @@ function createBillabilityCard(addTimePanel: Element) {
     spinner.className = 'title-date-spinner';
     const spinnerIcon = document.createElement('i');
     spinner.appendChild(spinnerIcon);
-    spinnerIcon.className = 'fa fa-circle-o-notch fa-spin';
+    spinnerIcon.id = 'billability-loading';
+    spinnerIcon.className = 'fa fa-circle-o-notch fa-spin hidden';
 
     const toggleViewBtn = document.createElement('button');
 
@@ -103,6 +106,15 @@ function createBillabilityCard(addTimePanel: Element) {
     return chartContainer;
 }
 
+function updateLoadingState(loading: boolean) {
+    const spinner = document.getElementById('billability-loading');
+    if (spinner) {
+        loading
+            ? spinner.classList.remove('hidden')
+            : spinner.classList.add('hidden');
+    }
+}
+
 /**
  * Gets times from TimeChimp for the given weeks in the past, and filters out the ones for the given user id.
  * Optionally a date can be provided, by default it will get times for the current date.

src/content/index.ts

@@ -10,7 +10,7 @@ import { settingsUpdateEvent } from './settings';
 setDefaultOptions({
     // Weeks start on Monday.
     weekStartsOn: 1,
-    // Week number 1 should contain the 4th on January.
+    // Week number 1 should contain the 4th of January.
     firstWeekContainsDate: 4,
 });