Added LoadingStatusCell, a cell that shows the status of some loadable data. Table and TableController make use of it to show a notification on the first load and on errors.

web/src/main/kotlin/world/phantasmal/web/huntOptimizer/controllers/MethodsForEpisodeController.kt

@@ -1,12 +1,13 @@
 package world.phantasmal.web.huntOptimizer.controllers
 
-import world.phantasmal.psolib.Episode
-import world.phantasmal.psolib.fileFormats.quest.NpcType
 import world.phantasmal.observable.cell.list.ListCell
 import world.phantasmal.observable.cell.list.listCell
 import world.phantasmal.observable.cell.list.mutableListCell
+import world.phantasmal.psolib.Episode
+import world.phantasmal.psolib.fileFormats.quest.NpcType
 import world.phantasmal.web.huntOptimizer.models.HuntMethodModel
 import world.phantasmal.web.huntOptimizer.stores.HuntMethodStore
+import world.phantasmal.webui.LoadingStatusCell
 import world.phantasmal.webui.controllers.Column
 import world.phantasmal.webui.controllers.SortColumn
 import world.phantasmal.webui.controllers.SortDirection
@@ -24,6 +25,8 @@ class MethodsForEpisodeController(
 
     override val values: ListCell<HuntMethodModel> = methods
 
+    override val valuesStatus: LoadingStatusCell = huntMethodStore.methodsStatus
+
     override val columns: ListCell<Column<HuntMethodModel>> = listCell(
         Column(
             key = METHOD_COL_KEY,

web/src/main/kotlin/world/phantasmal/web/huntOptimizer/stores/HuntMethodStore.kt

@@ -1,12 +1,11 @@
 package world.phantasmal.web.huntOptimizer.stores
 
 import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
-import world.phantasmal.psolib.Episode
-import world.phantasmal.psolib.fileFormats.quest.NpcType
 import world.phantasmal.observable.cell.list.ListCell
 import world.phantasmal.observable.cell.list.mutableListCell
+import world.phantasmal.psolib.Episode
+import world.phantasmal.psolib.fileFormats.quest.NpcType
 import world.phantasmal.web.core.loading.AssetLoader
 import world.phantasmal.web.core.models.Server
 import world.phantasmal.web.core.stores.UiStore
@@ -14,6 +13,8 @@ import world.phantasmal.web.huntOptimizer.models.HuntMethodModel
 import world.phantasmal.web.huntOptimizer.models.SimpleQuestModel
 import world.phantasmal.web.huntOptimizer.persistence.HuntMethodPersister
 import world.phantasmal.web.shared.dto.QuestDto
+import world.phantasmal.webui.LoadingStatusCell
+import world.phantasmal.webui.LoadingStatusCellImpl
 import world.phantasmal.webui.stores.Store
 import kotlin.collections.component1
 import kotlin.collections.component2
@@ -32,13 +33,16 @@ class HuntMethodStore(
         _methods
     }
 
+    private val _methodsStatus = LoadingStatusCellImpl("methods")
+    val methodsStatus: LoadingStatusCell = _methodsStatus
+
     suspend fun setMethodTime(method: HuntMethodModel, time: Duration) {
         method.setUserTime(time)
         huntMethodPersister.persistMethodUserTimes(methods.value, uiStore.server.value)
     }
 
     private fun loadMethods(server: Server) {
-        scope.launch(Dispatchers.Default) {
+        _methodsStatus.load(scope) {
             val quests = assetLoader.load<List<QuestDto>>("/quests.${server.slug}.json")
 
             val methods = quests

webui/src/main/kotlin/world/phantasmal/webui/LoadingStatusCell.kt

@@ -0,0 +1,75 @@
+package world.phantasmal.webui
+
+import kotlinx.coroutines.*
+import mu.KotlinLogging
+import world.phantasmal.observable.cell.Cell
+import world.phantasmal.observable.cell.ImmutableCell
+import world.phantasmal.observable.cell.SimpleCell
+import kotlin.time.measureTime
+
+private val logger = KotlinLogging.logger {}
+
+enum class LoadingStatus {
+    Uninitialized,
+    InitialLoad,
+    Loading,
+    Ok,
+    Error,
+}
+
+interface LoadingStatusCell : Cell<LoadingStatus> {
+    suspend fun awaitLoad()
+}
+
+class ImmutableLoadingStatusCell(status: LoadingStatus) :
+    LoadingStatusCell,
+    Cell<LoadingStatus> by ImmutableCell(status) {
+
+    override suspend fun awaitLoad() {
+        // Nothing to await.
+    }
+}
+
+class LoadingStatusCellImpl(
+    private val cellDelegate: SimpleCell<LoadingStatus>,
+    private val dataName: String,
+) : LoadingStatusCell, Cell<LoadingStatus> by cellDelegate {
+
+    constructor(dataName: String) : this(SimpleCell(LoadingStatus.Uninitialized), dataName)
+
+    private var job: Job? = null
+
+    fun load(scope: CoroutineScope, loadData: suspend () -> Unit) {
+        logger.trace { "Loading $dataName." }
+
+        cellDelegate.value =
+            if (value == LoadingStatus.Uninitialized) LoadingStatus.InitialLoad
+            else LoadingStatus.Loading
+
+        job = scope.launch {
+            var success = false
+
+            try {
+                val duration = measureTime {
+                    withContext(Dispatchers.Default) {
+                        loadData()
+                    }
+                }
+
+                logger.trace { "Loaded $dataName in ${duration.inWholeMilliseconds}ms." }
+
+                success = true
+            } catch (e: Exception) {
+                logger.error(e) { "Error while loading $dataName." }
+            } finally {
+                job = null
+
+                cellDelegate.value = if (success) LoadingStatus.Ok else LoadingStatus.Error
+            }
+        }
+    }
+
+    override suspend fun awaitLoad() {
+        job?.join()
+    }
+}

webui/src/main/kotlin/world/phantasmal/webui/controllers/TableController.kt

@@ -3,6 +3,9 @@ package world.phantasmal.webui.controllers
 import world.phantasmal.observable.cell.Cell
 import world.phantasmal.observable.cell.list.ListCell
 import world.phantasmal.observable.cell.nullCell
+import world.phantasmal.webui.ImmutableLoadingStatusCell
+import world.phantasmal.webui.LoadingStatus
+import world.phantasmal.webui.LoadingStatusCell
 
 class Column<T>(
     val key: String,
@@ -34,13 +37,17 @@ interface SortColumn<T> {
 abstract class TableController<T> : Controller() {
     private val sortColumns: MutableList<SortColumnImpl> = mutableListOf()
 
-    /**
+    /** How many columns stay in place on the left side while scrolling. */
-     * How many columns stay in place on the left side while scrolling.
-     */
     open val fixedColumns: Int = 0
     open val hasFooter: Boolean = false
 
+    /** Each value is represented by a row in the table. */
     abstract val values: ListCell<T>
+
+    open val valuesStatus: LoadingStatusCell =
+        // Assume values are already loaded by default.
+        ImmutableLoadingStatusCell(LoadingStatus.Ok)
+
     abstract val columns: ListCell<Column<T>>
 
     open fun sort(sortColumns: List<SortColumn<T>>) {

webui/src/main/kotlin/world/phantasmal/webui/widgets/Table.kt

@@ -5,6 +5,7 @@ import world.phantasmal.core.disposable.Disposable
 import world.phantasmal.core.disposable.Disposer
 import world.phantasmal.observable.cell.Cell
 import world.phantasmal.observable.cell.trueCell
+import world.phantasmal.webui.LoadingStatus
 import world.phantasmal.webui.controllers.Column
 import world.phantasmal.webui.controllers.TableController
 import world.phantasmal.webui.dom.*
@@ -25,6 +26,25 @@ class Table<T>(
 
             this@Table.className?.let { classList.add(it) }
 
+            div {
+                className = "pw-table-notification"
+
+                observe(ctrl.valuesStatus) {
+                    when (it) {
+                        LoadingStatus.InitialLoad -> {
+                            hidden = false
+                            innerText = "Loading..."
+                        }
+                        LoadingStatus.Error -> {
+                            hidden = false
+                            innerText = "An error occurred while loading this table."
+                        }
+                        else -> {
+                            hidden = true
+                        }
+                    }
+                }
+            }
             thead {
                 tr {
                     className = "pw-table-row pw-table-header-row"
@@ -184,6 +204,20 @@ class Table<T>(
                     background-color: var(--pw-bg-color);
                     border-collapse: collapse;
                 }
+                
+                .pw-table-notification {
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    display: grid;
+                    grid-template: 100% / 100%;
+                    place-items: center;
+                    text-align: center;
+                    color: var(--pw-text-color-disabled);
+                    font-size: 20px;
+                }
 
                 .pw-table > thead {
                     position: sticky;