refactor: handle loading in mnswpr class

src/mnswpr.js

@@ -3,6 +3,7 @@
 import {
   LeaderBoardService,
   LoggerService,
+  LoadingService,
   StorageService,
   TimerService
 } from './modules/index.js'
@@ -25,7 +26,8 @@ export const Minesweeper = function(appId) {
   const storageService = new StorageService()
   const timerService = new TimerService()
   const loggerService = new LoggerService()
-  const leaderBoard = new LeaderBoardService()
+  const leaderBoardService = new LeaderBoardService()
+  const loadingService = new LoadingService()
 
   let grid = document.createElement('table')
   grid.setAttribute('id', 'grid')
@@ -41,7 +43,6 @@ export const Minesweeper = function(appId) {
     appElement = document.createElement('div')
     body.append(appElement)
   }
-  let leaderWrapper = document.createElement('div')
 
   let isMobile = false
   let isLeft = false
@@ -102,12 +103,14 @@ export const Minesweeper = function(appId) {
     return sourceLink
   }
 
-  function initializeLeaderBoard() {
+  async function initializeLeaderBoard() {
     const title = `Best Times (${setting.name})`
-    leaderBoard.update(setting.id ?? setting.name, leaderWrapper, title)
+    let loading = document.createElement('div')
+    loadingService.addLoading(loading)
+    appElement?.append(loading)
 
-    if(appElement)
+    const leaderBoard = await leaderBoardService.update(setting.id ?? setting.name, title)
-      appElement.append(leaderWrapper)
+    appElement?.replaceChild(leaderBoard, loading)
   }
 
   function initializeFootbar() {
@@ -538,7 +541,7 @@ export const Minesweeper = function(appId) {
     }
 
     if (!TEST_MODE) {
-      leaderBoard.send(game, 'time')
+      leaderBoardService.send(game, 'time')
     }
 
   }

src/modules/leader-board/leader-board.js

@@ -1,6 +1,5 @@
 import { TimerService } from '../timer/timer'
 import { UserService } from '../user/user'
-import { LoadingService } from '../loading/loading'
 import { LoggerService } from '../logger/logger'
 
 import { initializeApp } from 'firebase/app'
@@ -12,7 +11,6 @@ import {
 export class LeaderBoardService {
 
   timerService = new TimerService()
-  loadingService = new LoadingService()
   loggerService = new LoggerService()
   user = new UserService()
   previousLevel
@@ -54,10 +52,10 @@ export class LeaderBoardService {
     return this._store
   }
 
-  async update(level, displayElement, title) {
+  async update(level, title) {
+    const displayElement = document.createElement('div')
 
     if (level !== this.previousLevel) {
-      this.loadingService.addLoading(displayElement)
       this.previousLevel = level
       this.lastPlace = Number.MAX_SAFE_INTEGER
 
@@ -70,6 +68,7 @@ export class LeaderBoardService {
       this.renderList(displayElement, title, this.topListSnapshot.docs)
     }
 
+    return displayElement
   }
 
   renderList(displayElement, title, docs) {