[LoadingIndicator]: Replace defaultProps with destructuring (#2601)

## Which problem is this PR solving?
- Part of #2596


## Description of the changes
- Updated the LoadingIndicator component to remove defaultProps so as to
avoid the deprecation warnings.
- Updated the snapshots so as to match the new LoadingIndicator.

## How was this change tested?
- Running `npm ci` `npm run update-snapshots` and `npm test` passes all
the tests
- Tested manually by rendering LoadingIndicator using various props

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [ ] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `npm run lint` and `npm run test`

---------

Signed-off-by: Abhishek <[email protected]>
Signed-off-by: Yuri Shkuro <[email protected]>
Co-authored-by: Yuri Shkuro <[email protected]>

Author: its-me-abhishek

packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/DetailsPanel.test.js.snap

@@ -89,9 +89,7 @@ exports[`<SidePanel> render renders detailLink 1`] = `
     className="Ddg--DetailsPanel--LoadingWrapper"
   >
     <LoadingIndicator
-      centered={false}
       className="Ddg--DetailsPanel--LoadingIndicator"
-      small={false}
     />
   </div>
   <VerticalResizer
@@ -268,9 +266,7 @@ exports[`<SidePanel> render renders while loading 1`] = `
     className="Ddg--DetailsPanel--LoadingWrapper"
   >
     <LoadingIndicator
-      centered={false}
       className="Ddg--DetailsPanel--LoadingIndicator"
-      small={false}
     />
   </div>
   <VerticalResizer

packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap

@@ -704,7 +704,6 @@ exports[`<ServiceGraph> Loading indicator is displayed 1`] = `
   >
     <LoadingIndicator
       centered={true}
-      small={false}
     />
   </div>
 </div>
@@ -735,7 +734,6 @@ exports[`<ServiceGraph> Loading indicator is displayed when xDomain is empty 1`]
   >
     <LoadingIndicator
       centered={true}
-      small={false}
     />
   </div>
 </div>

packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap

@@ -11,7 +11,6 @@ exports[`<OperationTableDetails> "Couldn’t fetch data" displayed 1`] = `
 exports[`<OperationTableDetails> Loading indicator is displayed 1`] = `
 <LoadingIndicator
   centered={true}
-  small={false}
 />
 `;
 

packages/jaeger-ui/src/components/QualityMetrics/__snapshots__/index.test.js.snap

@@ -44,7 +44,6 @@ exports[`QualityMetrics UnconnectedQualityMetrics render renders when loading 1`
   />
   <LoadingIndicator
     centered={true}
-    small={false}
   />
 </div>
 `;

packages/jaeger-ui/src/components/common/LoadingIndicator.tsx

@@ -17,28 +17,27 @@ import { LuLoader2 } from 'react-icons/lu';
 
 import './LoadingIndicator.css';
 
-type LoadingIndicatorProps = {
+export default function LoadingIndicator({
+  centered = false,
+  vcentered,
+  className = '',
+  small = false,
+  style,
+  ...rest
+}: {
   centered?: boolean;
   vcentered?: boolean;
   className?: string;
   small?: boolean;
   style?: React.CSSProperties;
-};
-
-export default function LoadingIndicator(props: LoadingIndicatorProps) {
-  const { centered, vcentered, className, small, ...rest } = props;
+}) {
   const cls = `
     LoadingIndicator
     ${centered ? 'is-centered' : ''}
     ${vcentered ? 'is-vcentered' : ''}
     ${small ? 'is-small' : ''}
-    ${className || ''}
+    ${className}
   `;
-  return <LuLoader2 className={cls} {...rest} />;
-}
 
-LoadingIndicator.defaultProps = {
-  centered: false,
-  className: undefined,
-  small: false,
-};
+  return <LuLoader2 className={cls} {...rest} style={style} />;
+}