From 4715b7a5bbb2b9e2822d0ba980915df13cf5fc1c Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 29 Nov 2022 11:05:16 +0100
Subject: [PATCH] fix(ui): fix store empty state display

---
 .../app/components/Session_/Storage/Storage.tsx   | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx
index 0f5e682c5..f955912e7 100644
--- a/frontend/app/components/Session_/Storage/Storage.tsx
+++ b/frontend/app/components/Session_/Storage/Storage.tsx
@@ -53,7 +53,7 @@ function Storage(props: Props) {
   const renderDiff = (item: Record<string, any>, prevItem: Record<string, any>) => {
     if (!prevItem) {
       // we don't have state before first action
-      return <div style={{ flex: 1 }} className="p-1" />;
+      return <div style={{ flex: 3 }} className="p-1" />;
     }
 
     const stateDiff = diff(prevItem.state, item.state);
@@ -106,13 +106,6 @@ function Storage(props: Props) {
     player.jump(list[listNow.length].time);
   };
 
-  const renderTab = () => {
-    if (listNow.length === 0) {
-      return 'Not initialized'; //?
-    }
-    return <JSONTree collapsed={2} src={listNow[listNow.length - 1].state} />;
-  };
-
   const renderItem = (item: Record<string, any>, i: number, prevItem: Record<string, any>) => {
     let src;
     let name;
@@ -279,16 +272,16 @@ function Storage(props: Props) {
             ) : null
           }
           size="small"
-          show={listNow.length === 0}
+          show={list.length === 0}
         >
           {showStore && (
             <div className="ph-10 scroll-y" style={{ width: '25%' }}>
-              {listNow.length === 0 ? (
+              {list.length === 0 ? (
                 <div className="color-gray-light font-size-16 mt-20 text-center">
                   {'Empty state.'}
                 </div>
               ) : (
-                renderTab()
+                <JSONTree collapsed={2} src={listNow.length === 0 ? list[0].state : listNow[listNow.length - 1].state} />
               )}
             </div>
           )}