From a01bbb2db974805234e6060c79778f4a620665b2 Mon Sep 17 00:00:00 2001
From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:37:13 +0300
Subject: [PATCH] fix loader, change width to show full header name

---
 .../playground/Playground/Playground.tsx      | 22 ++++++++++++-------
 .../PlaygroundResultsTable.tsx                |  4 ++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx
index 03001ecb66..53e1b7e185 100644
--- a/frontend/src/component/playground/Playground/Playground.tsx
+++ b/frontend/src/component/playground/Playground/Playground.tsx
@@ -18,6 +18,7 @@ import {
 } from './playground.utils';
 import { PlaygroundGuidance } from './PlaygroundGuidance/PlaygroundGuidance';
 import { PlaygroundGuidancePopper } from './PlaygroundGuidancePopper/PlaygroundGuidancePopper';
+import Loader from '../../common/Loader/Loader';
 
 export const Playground: VFC<{}> = () => {
     const { environments } = useEnvironments();
@@ -101,7 +102,6 @@ export const Playground: VFC<{}> = () => {
             if (action && typeof action === 'function') {
                 action();
             }
-
             setResults(response);
         } catch (error: unknown) {
             setToastData({
@@ -198,15 +198,21 @@ export const Playground: VFC<{}> = () => {
                     })}
                 >
                     <ConditionallyRender
-                        condition={Boolean(results)}
-                        show={
-                            <PlaygroundResultsTable
-                                loading={loading}
-                                features={results?.features}
-                                input={results?.input}
+                        condition={loading}
+                        show={<Loader />}
+                        elseShow={
+                            <ConditionallyRender
+                                condition={Boolean(results)}
+                                show={
+                                    <PlaygroundResultsTable
+                                        loading={loading}
+                                        features={results?.features}
+                                        input={results?.input}
+                                    />
+                                }
+                                elseShow={<PlaygroundGuidance />}
                             />
                         }
-                        elseShow={<PlaygroundGuidance />}
                     />
                 </Box>
             </Box>
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
index e3027403d8..bade0b60e0 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
@@ -22,7 +22,7 @@ import {
     PlaygroundFeatureSchema,
     PlaygroundRequestSchema,
 } from 'component/playground/Playground/interfaces/playground.model';
-import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { VariantCell } from './VariantCell/VariantCell';
 import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
@@ -111,7 +111,7 @@ export const PlaygroundResultsTable = ({
                     <FeatureStatusCell feature={row.original} />
                 ),
                 sortType: 'boolean',
-                maxWidth: 100,
+                maxWidth: 120,
                 sortInverted: true,
             },
             {