frontend: Replace SkeletonText with Skeleton to fix rerenders

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 <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+            return <Skeleton mt={5} noOfLines={20} height={4} />
         }
 
         const connectorStore = connectClusterStore.getConnectorStore(connectorName);

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 (
-            <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+            <Skeleton mt={5} noOfLines={20} height={4} />
         );
     }
 
@@ -547,7 +547,7 @@ function Review({
             ) : null}
 
             {isCreating ? (
-                <SkeletonText mt={5} noOfLines={6} spacing={5} skeletonHeight={4} />
+                <Skeleton mt={5} noOfLines={6} height={4} />
             ) : (
                 <>
                     {invalidValidationResult != null ? <ValidationDisplay validationResult={invalidValidationResult} /> : null}

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<ConfigPageProps> = observer(({ connectorStore,
 
     if (connectorStore.initPending) {
         return (
-            <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+            <Skeleton mt={5} noOfLines={20} height={4} />
         );
     }
 

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 {
                             </ul>
 
                             <ul className="resource-list">
-                                <SkeletonText
+                                <Skeleton
                                     isLoaded={Boolean(news)}
                                     noOfLines={4}
-                                    spacing={5}
-                                    skeletonHeight={4}
+                                    height={4}
                                 >
                                     {news?.map((x, i) => <li key={i}>
                                         <a href={x.url} rel="noopener noreferrer" target="_blank"
@@ -228,7 +227,7 @@ class Overview extends PageComponent {
                                             </span>
                                         </a>
                                     </li>)}
-                                </SkeletonText>
+                                </Skeleton>
                             </ul>
                         </div>
 
@@ -265,7 +264,7 @@ function ClusterDetails() {
     const brokers = api.brokers;
 
     if (!overview || !brokers) {
-        return <SkeletonText mt={5} noOfLines={13} spacing={5} skeletonHeight={4} speed={0} />
+        return <Skeleton mt={5} noOfLines={13} height={4} speed={0} />
     }
 
     const totalStorageBytes = brokers.sum(x => x.totalLogDirSizeBytes ?? 0);

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 */}
                 <CancelReassignmentButton onConfirm={() => this.cancelReassignment()}/>
             </Flex>
-        ) : <SkeletonText mt={5} noOfLines={5} spacing={5} skeletonHeight={4} />
+        ) : <Skeleton mt={5} noOfLines={5} height={4} />
 
         return (
             <Modal isOpen={visible} onClose={this.props.onClose}>

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,15 +474,15 @@ export class ZeroSizeWrapper extends Component<{ width?: string, height?: string
 
 
 const defaultSkeletonStyle = { margin: '2rem' };
-const innerSkeleton = <SkeletonText noOfLines={8} spacing={5} skeletonHeight={4} />
+const innerSkeleton = <Skeleton noOfLines={8} height={4} />
 export const DefaultSkeleton = (
     <motion.div {...animProps} key={'defaultSkeleton'} style={defaultSkeletonStyle}>
         {innerSkeleton}
     </motion.div>
 );
 
 export const InlineSkeleton = (p: { width: string | number }) => (
-    <SkeletonText noOfLines={1} skeletonHeight="2" width={p.width} display="flex" alignItems="center" />
+    <Skeleton noOfLines={1} height={2} width={p.width} display="flex" alignItems="center" />
 );
 
 // Single line string, no wrapping, will not overflow and display ellipsis instead