fix loader, change width to show full header name

Unleash · Aug 10, 2022 · a8e96b2 · a8e96b2
1 parent f5f65ae
commit a8e96b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/component/playground/Playground/Playground.tsx b/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/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/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,
             },
             {