From 79ef861f4341e20501e9c540f9ed9c81ba52204b Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Fri, 5 Jun 2020 10:26:25 -0700
Subject: [PATCH] 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.
---
 tictactoe/tictactoe.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

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>
-- 
2.43.0