Added new Spiner Component and Changed the Old Spin indicator (#224)

frontend/src/components/Spiner.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Spin } from 'antd';
+import styled from "styled-components";
+import { LoadingOutlined } from '@ant-design/icons';
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+const SpinerStyle = styled.div`
+position: fixed;
+z-index: 999;
+height: 4em;
+// width: 4em;
+overflow: visible;
+margin: auto;
+top: 0;
+left: 50%;
+bottom: 0;
+right: 0;
+`;
+
+export const CustomSpinner = ({
+    size,
+    tip,
+}:{
+    size:string,
+    tip:string,
+})=>{
+    return(
+        <>
+        <SpinerStyle>
+                <Spin size={size} tip={tip} indicator={antIcon}/>
+        </SpinerStyle>
+        </>
+    )
+}
+
+export const DefaultSpinner = ()=>{
+    return(
+        <>
+            <Spin indicator={antIcon}/>
+        </>
+    )
+}

frontend/src/modules/AppWrapper.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense } from "react";
-import { Spin } from "antd";
 import { useThemeSwitcher } from "react-css-theme-switcher";
 import ROUTES from "Src/constants/routes";
 import { IS_LOGGED_IN } from "Src/constants/auth";
 import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import { CustomSpinner } from "./../components/Spiner";
 
 import BaseLayout from "./BaseLayout";
 import {
@@ -28,12 +28,12 @@ const App = () => {
 
 	return (
 		<BrowserRouter>
-			<Suspense fallback={<Spin size="large" />}>
+			<Suspense fallback={<CustomSpinner size="large" tip="Loading..."/>}>
 				<Route path={"/"}>
 					<Switch>
 						<RouteProvider>
 							<BaseLayout>
-								<Suspense fallback={<Spin size="large" />}>
+								<Suspense fallback={<CustomSpinner size="large" tip="Loading..."/>}>
 									<Route path={ROUTES.SIGN_UP} exact component={Signup} />
 									<Route path={ROUTES.APPLICATION} exact component={ServicesTable} />
 									<Route

frontend/src/modules/Metrics/ServicesTable.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
-import { Button, Space, Spin, Table } from "antd";
+import { Button, Space, Table } from "antd";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import { SKIP_ONBOARDING } from "Src/constants/onboarding";
@@ -9,6 +9,7 @@ import { getServicesList, GlobalTime } from "../../store/actions";
 import { servicesListItem } from "../../store/actions/MetricsActions";
 import { StoreState } from "../../store/reducers";
 import { CustomModal } from "../../components/Modal";
+import { CustomSpinner,DefaultSpinner } from "../../components/Spiner";
 
 interface ServicesTableProps {
 	servicesList: servicesListItem[];
@@ -124,10 +125,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
 
 	if (!initialDataFetch) {
 		return (
-			<TableLoadingWrapper>
+			<CustomSpinner size="large" tip="Fetching data..."/>
-				<Spin />
-				<LoadingText>Fetching data</LoadingText>
-			</TableLoadingWrapper>
 		);
 	}
 
@@ -154,7 +152,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
 						allowFullScreen
 					></iframe>
 					<div style={{ margin: "20px 0" }}>
-						<Spin />
+						<DefaultSpinner/>
 					</div>
 					<div>
 						No instrumentation data.

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -7,7 +7,6 @@ import {
 	getServiceMapItems,
 	getDetailedServiceMapItems,
 } from "Src/store/actions";
-import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
 
@@ -15,6 +14,7 @@ import { getZoomPx, getGraphData, getTooltip, transformLabel } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
 import { useRoute } from "../RouteProvider";
+import { CustomSpinner } from "../../components/Spiner";
 
 const Container = styled.div`
 	.force-graph-container .graph-tooltip {
@@ -78,7 +78,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 		fgRef.current && fgRef.current.d3Force("charge").strength(-400);
 	});
 	if (!serviceMap.items.length || !serviceMap.services.length) {
-		return <Spin />;
+		return <CustomSpinner size="large" tip="Loading..."/>;
 	}
 
 	const zoomToService = (value: string) => {