Merge pull request #1214 from Unleash/fix/playground_virtualisation_l…

…oader Fix/playground virtualisation loader
Unleash · Aug 11, 2022 · 96639d7 · 96639d7
2 parents 493a996 + 6ea012f
commit 96639d7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 48 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/...nent/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/...nent/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/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/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 = ({
                     <FeatureStatusCell feature={row.original} />
                 ),
                 sortType: 'boolean',
+                maxWidth: 120,
                 sortInverted: true,
             },
             {
                 Header: '',
+                maxWidth: 70,
                 id: 'info',
                 Cell: ({ row }: any) => (
                     <FeatureResultInfoPopoverCell
@@ -154,11 +155,9 @@ export const PlaygroundResultsTable = ({
     }));
 
     const {
-        getTableProps,
-        getTableBodyProps,
         headerGroups,
-        state: { sortBy },
         rows,
+        state: { sortBy },
         prepareRow,
         setHiddenColumns,
     } = useTable(
@@ -170,11 +169,13 @@ export const PlaygroundResultsTable = ({
             autoResetGlobalFilter: false,
             autoResetSortBy: false,
             disableSortRemove: true,
+            disableMultiSort: true,
             defaultColumn: {
                 Cell: HighlightCell,
             },
         },
         useGlobalFilter,
+        useFlexLayout,
         useSortBy
     );
 
@@ -244,7 +245,6 @@ export const PlaygroundResultsTable = ({
                     containerStyles={{ marginLeft: '1rem', maxWidth: '400px' }}
                 />
             </Box>
-
             <ConditionallyRender
                 condition={!loading && !data}
                 show={() => (
@@ -259,30 +259,11 @@ export const PlaygroundResultsTable = ({
                         <SearchHighlightProvider
                             value={getSearchText(searchValue)}
                         >
-                            <Table {...getTableProps()} rowHeight="standard">
-                                <SortableTableHeader
-                                    headerGroups={headerGroups as any}
-                                />
-                                <TableBody {...getTableBodyProps()}>
-                                    {rows.map(row => {
-                                        prepareRow(row);
-                                        return (
-                                            <TableRow
-                                                hover
-                                                {...row.getRowProps()}
-                                            >
-                                                {row.cells.map(cell => (
-                                                    <TableCell
-                                                        {...cell.getCellProps()}
-                                                    >
-                                                        {cell.render('Cell')}
-                                                    </TableCell>
-                                                ))}
-                                            </TableRow>
-                                        );
-                                    })}
-                                </TableBody>
-                            </Table>
+                            <VirtualizedTable
+                                rows={rows}
+                                headerGroups={headerGroups}
+                                prepareRow={prepareRow}
+                            />
                         </SearchHighlightProvider>
                         <ConditionallyRender
                             condition={