From 555cc3bb01ada29032a88be870a41142fd8d1ea0 Mon Sep 17 00:00:00 2001 From: Beniamin Malinski Date: Thu, 23 Nov 2023 02:36:40 +0100 Subject: [PATCH] frontend: Replace SkeletonText with Skeleton to fix rerenders This is a fix for the Chakra UI issue which causes rerendering at least twice, making Console unusable --- .../components/pages/connect/Connector.Details.tsx | 4 ++-- .../src/components/pages/connect/CreateConnector.tsx | 6 +++--- .../pages/connect/dynamic-ui/components.tsx | 4 ++-- frontend/src/components/pages/overview/Overview.tsx | 11 +++++------ .../components/ActiveReassignments.tsx | 4 ++-- frontend/src/utils/tsxUtils.tsx | 6 +++--- 6 files changed, 17 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/pages/connect/Connector.Details.tsx b/frontend/src/components/pages/connect/Connector.Details.tsx index d58e5a800..71aad1e95 100644 --- a/frontend/src/components/pages/connect/Connector.Details.tsx +++ b/frontend/src/components/pages/connect/Connector.Details.tsx @@ -26,7 +26,7 @@ import './helper'; import { ConfirmModal, NotConfigured, statusColors, TaskState } from './helper'; import PageContent from '../../misc/PageContent'; import { delay } from '../../../utils/utils'; -import { Button, Alert, AlertIcon, Box, CodeBlock, Flex, Grid, Heading, Tabs, Text, useDisclosure, Modal as RPModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tooltip, SkeletonText } from '@redpanda-data/ui'; +import { Button, Alert, AlertIcon, Box, CodeBlock, Flex, Grid, Heading, Tabs, Text, useDisclosure, Modal as RPModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tooltip, Skeleton } from '@redpanda-data/ui'; import Section from '../../misc/Section'; import React from 'react'; import { getConnectorFriendlyName } from './ConnectorBoxCard'; @@ -67,7 +67,7 @@ const KafkaConnectorMain = observer( deletingConnector: null, })); if (!connectClusterStore.isInitialized) { - return + return } const connectorStore = connectClusterStore.getConnectorStore(connectorName); diff --git a/frontend/src/components/pages/connect/CreateConnector.tsx b/frontend/src/components/pages/connect/CreateConnector.tsx index 9b9ecfecd..4695923fe 100644 --- a/frontend/src/components/pages/connect/CreateConnector.tsx +++ b/frontend/src/components/pages/connect/CreateConnector.tsx @@ -37,7 +37,7 @@ import { ModalHeader, ModalOverlay, SearchField, - SkeletonText, + Skeleton, Spinner, Tabs, Text, @@ -443,7 +443,7 @@ const ConnectorWizard = observer(({ connectClusters, activeCluster }: ConnectorW if (!connectClusterStore.isInitialized) { return ( - + ); } @@ -547,7 +547,7 @@ function Review({ ) : null} {isCreating ? ( - + ) : ( <> {invalidValidationResult != null ? : null} diff --git a/frontend/src/components/pages/connect/dynamic-ui/components.tsx b/frontend/src/components/pages/connect/dynamic-ui/components.tsx index 7a10ba0e3..7f83d4ff2 100644 --- a/frontend/src/components/pages/connect/dynamic-ui/components.tsx +++ b/frontend/src/components/pages/connect/dynamic-ui/components.tsx @@ -15,7 +15,7 @@ import { ConnectorPropertiesStore, PropertyGroup } from '../../../../state/conne import { observer } from 'mobx-react'; import { ConnectorStepComponent } from './ConnectorStep'; import { ConnectorStep } from '../../../../state/restInterfaces'; -import { Box, RadioGroup, SkeletonText, Switch } from '@redpanda-data/ui'; +import { Box, RadioGroup, Skeleton, Switch } from '@redpanda-data/ui'; import KowlEditor from '../../../misc/KowlEditor'; import { api } from '../../../../state/backendApi'; import { clone } from '../../../../utils/jsonUtils'; @@ -38,7 +38,7 @@ export const ConfigPage: React.FC = observer(({ connectorStore, if (connectorStore.initPending) { return ( - + ); } diff --git a/frontend/src/components/pages/overview/Overview.tsx b/frontend/src/components/pages/overview/Overview.tsx index 9f9368847..fff3c174b 100644 --- a/frontend/src/components/pages/overview/Overview.tsx +++ b/frontend/src/components/pages/overview/Overview.tsx @@ -24,7 +24,7 @@ import { KowlColumnType, KowlTable } from '../../misc/KowlTable'; import Section from '../../misc/Section'; import PageContent from '../../misc/PageContent'; import './Overview.scss'; -import { Button, Flex, Heading, Icon, Link, SkeletonText, Tooltip } from '@redpanda-data/ui'; +import { Button, Flex, Heading, Icon, Link, Skeleton, Tooltip } from '@redpanda-data/ui'; import { CheckIcon } from '@primer/octicons-react'; import { Link as ReactRouterLink } from 'react-router-dom'; import React from 'react'; @@ -212,11 +212,10 @@ class Overview extends PageComponent {
    - {news?.map((x, i) =>
    • )} -     +
@@ -265,7 +264,7 @@ function ClusterDetails() { const brokers = api.brokers; if (!overview || !brokers) { - return + return } const totalStorageBytes = brokers.sum(x => x.totalLogDirSizeBytes ?? 0); diff --git a/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx b/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx index 79dd72325..ef4e83787 100644 --- a/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx +++ b/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx @@ -23,7 +23,7 @@ import { reassignmentTracker } from '../ReassignPartitions'; import { BandwidthSlider } from './BandwidthSlider'; import { KowlColumnType, KowlTable } from '../../../misc/KowlTable'; import { BrokerList } from '../../../misc/BrokerList'; -import { Box, Button, Checkbox, createStandaloneToast, Flex, ListItem, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverCloseButton, PopoverArrow, PopoverContent, PopoverHeader, PopoverTrigger, Progress, redpandaTheme, redpandaToastOptions, Text, ToastId, UnorderedList, useDisclosure, useToast, PopoverFooter, PopoverBody, ButtonGroup, SkeletonText } from '@redpanda-data/ui'; +import { Box, Button, Checkbox, createStandaloneToast, Flex, ListItem, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverCloseButton, PopoverArrow, PopoverContent, PopoverHeader, PopoverTrigger, Progress, redpandaTheme, redpandaToastOptions, Text, ToastId, UnorderedList, useDisclosure, useToast, PopoverFooter, PopoverBody, ButtonGroup, Skeleton } from '@redpanda-data/ui'; // TODO - once ActiveReassignments is migrated to FC, we could should move this code to use useToast() const { ToastContainer, toast } = createStandaloneToast({ @@ -374,7 +374,7 @@ export class ReassignmentDetailsDialog extends Component<{ state: ReassignmentSt {/* Cancel */} this.cancelReassignment()}/> - ) : + ) : return ( diff --git a/frontend/src/utils/tsxUtils.tsx b/frontend/src/utils/tsxUtils.tsx index e893aff23..b8fc70a27 100644 --- a/frontend/src/utils/tsxUtils.tsx +++ b/frontend/src/utils/tsxUtils.tsx @@ -23,7 +23,7 @@ import { SizeType } from 'antd/lib/config-provider/SizeContext'; import { makeObservable, observable } from 'mobx'; import { InfoIcon } from '@primer/octicons-react'; import colors from '../colors'; -import { SkeletonText } from '@chakra-ui/react'; +import { Skeleton } from '@chakra-ui/react'; const defaultLocale = 'en' const thousandsSeperator = (1234).toLocaleString(defaultLocale)[1]; @@ -474,7 +474,7 @@ export class ZeroSizeWrapper extends Component<{ width?: string, height?: string const defaultSkeletonStyle = { margin: '2rem' }; -const innerSkeleton = +const innerSkeleton = export const DefaultSkeleton = ( {innerSkeleton} @@ -482,7 +482,7 @@ export const DefaultSkeleton = ( ); export const InlineSkeleton = (p: { width: string | number }) => ( - + ); // Single line string, no wrapping, will not overflow and display ellipsis instead