Show indication of process when switching between between brief and d…

…etailed table
v6ak · Oct 23, 2023 · f4e5007 · f4e5007
1 parent 988c26b
commit f4e5007
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/client/src/main/scala/com/v6ak/zbdb/ClassSwitches.scala b/client/src/main/scala/com/v6ak/zbdb/ClassSwitches.scala
@@ -8,19 +8,21 @@ import scalatags.JsDom.all.{button as buttonTag, *}
 final class ClassSwitches(
   initialSwitchesState: Map[String, String],
   alreadySwitchedClasses: Map[String, String] = Map(),
+  handler: (String, String, () => Unit) => Unit = (_: String, _: String, f: () => Unit) => f(),
 ) {
   private val switchesState = collection.mutable.Map(initialSwitchesState.toSeq: _*)
 
   def values = switchesState.values
 
-  private def update(switchName: String, newClass: String, allValues: Set[String]) = {
+  private def update(switchName: String, newClass: String, allValues: Set[String]): Unit =
     val oldClasses = allValues - newClass
     val classList = dom.document.body.classList
-    classList.add(newClass)
-    oldClasses.foreach(classList.remove)
-    switchesState(switchName) = newClass
-    alreadySwitchedClasses.get(switchName).foreach(classList.add)
-  }
+    handler(switchName, newClass, () => {
+      classList.add(newClass)
+      oldClasses.foreach(classList.remove)
+      switchesState(switchName) = newClass
+      alreadySwitchedClasses.get(switchName).foreach(classList.add)
+    })
 
   def classSelect(switchName: String)(items: (String, String)*) = select(
     onchange := { (e: Event) =>

diff --git a/client/src/main/scala/com/v6ak/zbdb/Renderer.scala b/client/src/main/scala/com/v6ak/zbdb/Renderer.scala
@@ -53,6 +53,21 @@ final class Renderer private(
   private val switches = new ClassSwitches(
     Map("details" -> "without-details"),
     Map("details" -> "details-switched"),
+    (name, cls, f) => {
+      document.body.style.opacity = "0.5"
+      window.setTimeout(
+        () => {
+          f()
+          window.setTimeout(
+            () => {
+              document.body.style.opacity = "1"
+            },
+            0
+          )
+        },
+        0
+      )
+    }
   )
 
   import participantTable.*