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<{}> = () => {
})}
>
}
+ elseShow={
+
+ }
+ elseShow={}
/>
}
- elseShow={}
/>
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
index efffa73f3a..0a0fe4d692 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
@@ -20,12 +20,12 @@ const StyledChipWrapper = styled(Box)(() => ({
export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => {
const enabled = feature.isEnabled
? true
- : feature.strategies.result === false
+ : feature.strategies?.result === false
? false
: 'unknown';
const label = feature.isEnabled
? 'True'
- : feature.strategies.result === false
+ : feature.strategies?.result === false
? 'False'
: 'Unknown';
return (
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
index fd5db14d1a..fac8ab4921 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
@@ -1,15 +1,14 @@
import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
-import { SortingRule, useGlobalFilter, useSortBy, useTable } from 'react-table';
-
import {
- SortableTableHeader,
- Table,
- TableBody,
- TableCell,
- TablePlaceholder,
- TableRow,
-} from 'component/common/Table';
+ SortingRule,
+ useFlexLayout,
+ useGlobalFilter,
+ useSortBy,
+ useTable,
+} from 'react-table';
+
+import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { sortTypes } from 'utils/sortTypes';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@@ -86,7 +85,7 @@ export const PlaygroundResultsTable = ({
sortType: 'alphanumeric',
filterName: 'variant',
searchable: true,
- width: 200,
+ maxWidth: 200,
Cell: ({
value,
row: {
@@ -110,10 +109,12 @@ export const PlaygroundResultsTable = ({
),
sortType: 'boolean',
+ maxWidth: 120,
sortInverted: true,
},
{
Header: '',
+ maxWidth: 70,
id: 'info',
Cell: ({ row }: any) => (
-
(
@@ -259,30 +259,11 @@ export const PlaygroundResultsTable = ({
-
-
-
- {rows.map(row => {
- prepareRow(row);
- return (
-
- {row.cells.map(cell => (
-
- {cell.render('Cell')}
-
- ))}
-
- );
- })}
-
-
+