From 2138deacbda15338eb29048e800cf49a03e7036d Mon Sep 17 00:00:00 2001
From: David Ballester Mena <david.ballester.mena@gmail.com>
Date: Sat, 18 Apr 2020 12:47:00 +0200
Subject: [PATCH] feat: do not display the new graph card before the rest are
 loaded

---
 src/scenes/welcome/welcome.component.js | 5 +++--
 src/scenes/welcome/welcome.duck.js      | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/scenes/welcome/welcome.component.js b/src/scenes/welcome/welcome.component.js
index 6e521a0..3490c40 100644
--- a/src/scenes/welcome/welcome.component.js
+++ b/src/scenes/welcome/welcome.component.js
@@ -102,6 +102,7 @@ function GraphCards({ show, graphNames, openNewGraph, openGraph, className }) {
 }
 
 function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, isAuthInitialized, classes }) {
+  const displaySkeletons = !isAuthInitialized || !graphNames;
   return (
     <>
       <CookieDialog />
@@ -131,9 +132,9 @@ function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, isAuthI
               Import graph
             </Button>
           </div>
-          <SkeletonGraphs show={!isAuthInitialized} className={classes.graphList} />
+          <SkeletonGraphs show={displaySkeletons} className={classes.graphList} />
           <GraphCards
-            show={isAuthInitialized}
+            show={!displaySkeletons}
             graphNames={graphNames}
             openGraph={openGraph}
             openNewGraph={openNewGraph}
diff --git a/src/scenes/welcome/welcome.duck.js b/src/scenes/welcome/welcome.duck.js
index 570d0cd..e3f9ac7 100644
--- a/src/scenes/welcome/welcome.duck.js
+++ b/src/scenes/welcome/welcome.duck.js
@@ -22,7 +22,7 @@ export function readNamesSuccess(names) {
   };
 }
 
-export default function reducer(state = {}, action) {
+export default function reducer(state = null, action) {
   switch (action.type) {
     case GRAPH_CREATE: {
       const { id, name } = action.payload;
@@ -60,7 +60,7 @@ export function getGraphNames(state) {
 
 export const getGraphNamesAsArray = createSelector(
   getGraphNames,
-  (graphNames) => entries(graphNames)
+  (graphNames) => (!!graphNames ? entries(graphNames) : undefined)
 );
 
 export function* doReadGraphNames() {