From: Carl Worth <cworth@cworth.org>
Date: Fri, 5 Jun 2020 17:26:25 +0000 (-0700)
Subject: Return null from GameInfo and PlayerInfo if they have no populated props
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=79ef861f4341e20501e9c540f9ed9c81ba52204b;ds=sidebyside

Return null from GameInfo and PlayerInfo if they have no populated props

These info objects get filled in with data that is streamed from the
server "/events" API. While the page is still loading, we don't want
to brifly see the skeleton of these objects drawn with no real data
inside them.

It's much cleaner to return null instead. This gives a clean result
where these sections of the page only appear when fully formed.
---

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index f1426ec..a7614bc 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -72,6 +72,9 @@ events.addEventListener("game-state", event => {
  *********************************************************/
 
 function GameInfo(props) {
+  if (! props.id)
+    return null;
+
   return (
     <div className="game-info">
       <h2>{props.id}</h2>
@@ -81,6 +84,9 @@ function GameInfo(props) {
 }
 
 function PlayerInfo(props) {
+  if (! props.id)
+    return null;
+
   return (
     <div className="player-info">
       <h2>Player</h2>