fix table jerks

* fix initial value for setup keys so default works

* fix initial value for setup keys so default works

src/components/FooterComponent.tsx

@@ -6,7 +6,7 @@ const { Footer } = Layout
 export default () => {
   return (
       <Footer style={{ textAlign: 'center',  bottom: "0"}}>
-          Copyright © 2022 <a href="https://netbird.io">NetBird Authors</a>
+          Copyright © 2023 <a href="https://netbird.io">NetBird Authors</a>
       </Footer>
   );
-};
+};

src/components/PeerUpdate.tsx

@@ -366,7 +366,6 @@ const PeerUpdate = () => {
       noUpdateToName() &&
       noUpdateToLoginExpiration()
     ) {
-      console.log("no group update==<");
       const style = { marginTop: 85 };
       if (savedGroups.loading) {
         message.loading({

src/components/RoutePeerUpdate.tsx

@@ -234,7 +234,6 @@ const RoutePeerUpdate = () => {
           style: styleNotification,
         });
       } else if (savedRoute.success) {
-        console.log("savedRoute", savedRoute);
         message.success({
           content: "Route has been successfully updated.",
           key: saveKey,

src/components/RouteUpdate.tsx

@@ -259,7 +259,6 @@ const RouteAddNew = () => {
         style: styleNotification,
       });
     } else if (savedRoute.success) {
-      console.log("savedRoute", savedRoute);
       message.success({
         content: "Route has been successfully added.",
         key: saveKey,

src/components/SetupKeyEdit.tsx

@@ -27,7 +27,6 @@ import { RuleObject } from "antd/lib/form";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Group } from "../store/group/types";
 import { useGetTokenSilently } from "../utils/token";
-import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
 import moment from "moment";
 import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
@@ -37,7 +36,6 @@ import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
-const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const customExpiresFormat = (value: Date): string | null => {
   return formatDate(value);
@@ -95,7 +93,6 @@ const SetupKeyNew = () => {
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
-      expiresInFormatted: ExpiresInDefault,
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
@@ -115,7 +112,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds while the form returns days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -287,7 +284,6 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
               usage_limit: 1,
             }}
           >

src/components/SetupKeyNew.tsx

@@ -26,7 +26,6 @@ import { RuleObject } from "antd/lib/form";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Group } from "../store/group/types";
 import { useGetTokenSilently } from "../utils/token";
-import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
 import moment from "moment";
 import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
@@ -36,7 +35,6 @@ import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
-const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const SetupKeyNew = () => {
   const { optionRender, blueTagRender } = useGetGroupTagHelpers();
@@ -88,7 +86,6 @@ const SetupKeyNew = () => {
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
-      expiresInFormatted: ExpiresInDefault,
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
@@ -108,7 +105,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds we have days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -374,7 +371,6 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
               usage_limit: 1,
             }}
           >
@@ -488,13 +484,12 @@ const SetupKeyNew = () => {
               </Col>
               <Col>
                 <Form.Item
-                  name="expiresIn"
+                  name="expires_in"
                   rules={[
                     { required: true, message: "Please enter expiration date" },
                   ]}
                 >
                   <InputNumber
-                    defaultValue={7}
                     placeholder={`2`}
                     type="number"
                     addonAfter=" Days"

src/index.css

@@ -211,6 +211,9 @@ td.non-highlighted-table-column {
 
 .ant-form-item-explain-error {
   font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+  margin-top: 2px;
 }
 
 .menlo-font,
@@ -441,4 +444,27 @@ ul.ant-list-items {
   position: absolute;
   top: 10px;
   right: 2px;
+}
+
+.blue-color {
+  color: #1890FF;
+}
+
+.style-like-text .ant-select-selector {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  color: rgba(0, 0, 0, 1) !important;
+}
+
+.style-like-text .ant-select-selection-search::after {
+  display: none !important;
+}
+
+.style-like-text .ant-select-selection-item {
+  padding-inline-end: 0 !important;
+}
+
+.style-like-text .ant-select-arrow {
+  display: none !important;
 }

src/store/nameservers/actions.ts

@@ -28,6 +28,7 @@ const actions = {
 
   setNameServerGroup: createAction('SET_NameServerGroup')<NameServerGroup>(),
   setSetupNewNameServerGroupVisible: createAction('SET_SETUP_NEW_NameServerGroup_VISIBLE')<boolean>(),
+  setSetupEditNameServerGroupVisible: createAction('SET_SETUP_EDIT_NameServerGroup_VISIBLE')<boolean>(),
   setSetupNewNameServerGroupHA: createAction('SET_SETUP_NEW_NameServerGroup_HA')<boolean>()
 };
 

src/store/nameservers/reducer.ts

@@ -13,6 +13,7 @@ type StateType = Readonly<{
   deleteNameServerGroup: DeleteResponse<string | null>;
   savedNameServerGroup: CreateResponse<NameServerGroup | null>;
   setupNewNameServerGroupVisible: boolean;
+  setupEditNameServerGroupVisible: boolean;
   setupNewNameServerGroupHA: boolean
 }>;
 
@@ -27,17 +28,18 @@ const initialState: StateType = {
     success: false,
     failure: false,
     error: null,
-    data : null
+    data: null,
   },
   savedNameServerGroup: <CreateResponse<NameServerGroup | null>>{
     loading: false,
     success: false,
     failure: false,
     error: null,
-    data : null
+    data: null,
   },
   setupNewNameServerGroupVisible: false,
-  setupNewNameServerGroupHA: false
+  setupEditNameServerGroupVisible: false,
+  setupNewNameServerGroupHA: false,
 };
 
 const data = createReducer<NameServerGroup[], ActionTypes>(initialState.data as NameServerGroup[])
@@ -79,6 +81,9 @@ const savedNameServerGroup = createReducer<CreateResponse<NameServerGroup | null
 const setupNewNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupVisible)
     .handleAction(actions.setSetupNewNameServerGroupVisible, (store, action) => action.payload)
 
+const setupEditNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupEditNameServerGroupVisible)
+    .handleAction(actions.setSetupEditNameServerGroupVisible, (store, action) => action.payload)
+
 const setupNewNameServerGroupHA = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupHA)
     .handleAction(actions.setSetupNewNameServerGroupHA, (store, action) => action.payload)
 
@@ -91,5 +96,6 @@ export default combineReducers({
   deletedNameServerGroup,
   savedNameServerGroup,
   setupNewNameServerGroupVisible,
-  setupNewNameServerGroupHA
+  setupEditNameServerGroupVisible,
+  setupNewNameServerGroupHA,
 });

src/store/nameservers/sagas.ts

@@ -118,13 +118,13 @@ export function* setDeleteNameServerGroup(action: ReturnType<typeof  actions.set
 
 export function* deleteNameServerGroup(action: ReturnType<typeof actions.deleteNameServerGroup.request>): Generator {
   try {
-    yield call(actions.setDeletedNameServerGroup,{
+    yield put(actions.setDeletedNameServerGroup({
       loading: true,
       success: false,
       failure: false,
       error: null,
       data: null
-    } as DeleteResponse<string | null>)
+     }))
 
     const effect = yield call(service.deletedNameServerGroup, action.payload);
     const response = effect as ApiResponse<any>;

src/store/nameservers/types.ts

@@ -1,21 +1,20 @@
 export interface NameServerGroup {
-    id?: string
-    name: string
-    description: string
-    primary: boolean
-    domains: string[]
-    nameservers: NameServer[]
-    groups: string[]
-    enabled: boolean
+  id?: string;
+  name: string;
+  description: string;
+  primary: boolean;
+  domains: string[];
+  nameservers: NameServer[];
+  groups: string[];
+  enabled: boolean;
 }
 
 export interface NameServer {
-    ip: string
-    ns_type: string
-    port: number
+  ip: string;
+  ns_type: string;
+  port: number;
 }
 
-export interface NameServerGroupToSave extends NameServerGroup
-{
-    groupsToCreate: string[]
-}
+export interface NameServerGroupToSave extends NameServerGroup {
+  groupsToCreate?: string[];
+}

src/store/policy/sagas.ts

@@ -174,13 +174,15 @@ export function* deletePolicy(
   action: ReturnType<typeof actions.deletePolicy.request>
 ): Generator {
   try {
-    yield call(actions.setDeletedPolicy, {
-      loading: true,
-      success: false,
-      failure: false,
-      error: null,
-      data: null,
-    } as DeleteResponse<string | null>);
+    yield put(
+      actions.setDeletedPolicy({
+        loading: true,
+        success: false,
+        failure: false,
+        error: null,
+        data: null,
+      })
+    );
 
     const effect = yield call(service.deletedPolicy, action.payload);
     const response = effect as ApiResponse<any>;

src/store/setup-key/types.ts

@@ -1,4 +1,3 @@
-import {ExpiresInValue} from "../../views/ExpiresInInput";
 import moment from "moment";
 
 export interface SetupKey {
@@ -19,7 +18,6 @@ export interface SetupKey {
 
 export interface FormSetupKey extends SetupKey {
   autoGroupNames: string[]
-  expiresInFormatted: ExpiresInValue
   exp: moment.Moment
   last: moment.Moment
 }

src/views/AccessControl.tsx

@@ -473,7 +473,7 @@ export const AccessControl = () => {
   };
 
   const renderPorts = (ports: string[]) => {
-     if (!ports) {
+    if (!ports) {
       return (
         <Tag style={{ marginRight: 3 }}>
           <span className="menlo-font">ALL</span>
@@ -549,7 +549,6 @@ export const AccessControl = () => {
       })
     );
   };
-  console.log("dataTable", dataTable);
   return (
     <>
       {!setupEditPolicyVisible && (
@@ -662,7 +661,46 @@ export const AccessControl = () => {
                     />
                   )}
                   <Card bodyStyle={{ padding: 0 }}>
-                    {!showTutorial && (
+                    {showTutorial && !loading ? (
+                      <Space
+                        direction="vertical"
+                        size="small"
+                        align="center"
+                        style={{
+                          display: "flex",
+                          padding: "45px 15px",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <Title level={4} style={{ textAlign: "center" }}>
+                          Create New Rule
+                        </Title>
+                        <Paragraph
+                          style={{
+                            textAlign: "center",
+                            whiteSpace: "pre-line",
+                          }}
+                        >
+                          It looks like you don't have any rules. {"\n"}
+                          Get started with access control by adding a new one.
+                          <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href="https://docs.netbird.io/how-to/manage-network-access"
+                          >
+                            {" "}
+                            Learn more
+                          </a>
+                        </Paragraph>
+                        <Button
+                          size={"middle"}
+                          type="primary"
+                          onClick={() => onClickAddNewPolicy()}
+                        >
+                          Add rule
+                        </Button>
+                      </Space>
+                    ) : (
                       <Table
                         pagination={{
                           current: currentPage,
@@ -826,46 +864,6 @@ export const AccessControl = () => {
                         />
                       </Table>
                     )}
-                    {showTutorial && (
-                      <Space
-                        direction="vertical"
-                        size="small"
-                        align="center"
-                        style={{
-                          display: "flex",
-                          padding: "45px 15px",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <Title level={4} style={{ textAlign: "center" }}>
-                          Create New Rule
-                        </Title>
-                        <Paragraph
-                          style={{
-                            textAlign: "center",
-                            whiteSpace: "pre-line",
-                          }}
-                        >
-                          It looks like you don't have any rules. {"\n"}
-                          Get started with access control by adding a new one.
-                          <a
-                            target="_blank"
-                            rel="noreferrer"
-                            href="https://docs.netbird.io/how-to/manage-network-access"
-                          >
-                            {" "}
-                            Learn more
-                          </a>
-                        </Paragraph>
-                        <Button
-                          size={"middle"}
-                          type="primary"
-                          onClick={() => onClickAddNewPolicy()}
-                        >
-                          Add rule
-                        </Button>
-                      </Space>
-                    )}
                   </Card>
                 </Space>
               </Col>

src/views/DNS.tsx

@@ -1,78 +1,91 @@
-import React, {useEffect, useState} from 'react';
-import {Container} from "../components/Container";
-import {
-    Col,
-    Row,
-    Tabs,
-    Typography,
-} from "antd";
-import type { TabsProps } from 'antd';
+import React, { useEffect, useState } from "react";
+import { Container } from "../components/Container";
+import { Col, Row, Tabs, Typography } from "antd";
+import type { TabsProps } from "antd";
 import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
+import NameServerGroupAdd from "../components/NameServerGroupAdd";
 import Nameservers from "./Nameservers";
-import {actions as groupActions} from "../store/group";
-import {useGetTokenSilently} from "../utils/token";
-import {useDispatch, useSelector} from "react-redux";
+import { actions as groupActions } from "../store/group";
+import { useGetTokenSilently } from "../utils/token";
+import { useDispatch, useSelector } from "react-redux";
 import DNSSettingsForm from "./DNSSettings";
-import {RootState} from "typesafe-actions";
-import {actions as dnsSettingsActions} from '../store/dns-settings';
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { RootState } from "typesafe-actions";
+import { actions as dnsSettingsActions } from "../store/dns-settings";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
-const {Title, Paragraph} = Typography;
+const { Title, Paragraph } = Typography;
 
 export const DNS = () => {
-    const {getTokenSilently} = useGetTokenSilently()
-    const dispatch = useDispatch()
-    const {
-        getGroupNamesFromIDs,
-    } = useGetGroupTagHelpers()
+  const { getTokenSilently } = useGetTokenSilently();
+  const dispatch = useDispatch();
+  const { getGroupNamesFromIDs } = useGetGroupTagHelpers();
 
-    const dnsSettingsData = useSelector((state: RootState) => state.dnsSettings.data)
+  const dnsSettingsData = useSelector(
+    (state: RootState) => state.dnsSettings.data
+  );
+  const setupEditNameServerGroupVisible = useSelector(
+    (state: RootState) => state.nameserverGroup.setupEditNameServerGroupVisible
+  );
+  const setupNewNameServerGroupVisible = useSelector(
+    (state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible
+  );
+  useEffect(() => {
+    dispatch(
+      groupActions.getGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+  }, []);
 
-    useEffect(() => {
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getTokenSilently, payload: null}));
-    }, [])
+  const nsTabKey = "1";
+  const items: TabsProps["items"] = [
+    {
+      key: nsTabKey,
+      label: "Nameservers",
+      children: <Nameservers />,
+    },
+    {
+      key: "2",
+      label: "Settings",
+      children: <DNSSettingsForm />,
+    },
+  ];
 
-    const nsTabKey = '1'
-    const items: TabsProps['items'] = [
-        {
-            key: nsTabKey,
-            label: 'Nameservers',
-            children: <Nameservers/>,
-        },
-        {
-            key: '2',
-            label: 'Settings',
-            children: <DNSSettingsForm/>,
-        },
-    ]
-
-    const onTabClick = (key:string) => {
-        if (key == nsTabKey) {
-            if (!dnsSettingsData) return
-            dispatch(dnsSettingsActions.setDNSSettings({
-                disabled_management_groups: getGroupNamesFromIDs(dnsSettingsData.disabled_management_groups),
-            }))
-        }
+  const onTabClick = (key: string) => {
+    if (key == nsTabKey) {
+      if (!dnsSettingsData) return;
+      dispatch(
+        dnsSettingsActions.setDNSSettings({
+          disabled_management_groups: getGroupNamesFromIDs(
+            dnsSettingsData.disabled_management_groups
+          ),
+        })
+      );
     }
+  };
 
-    return (
-        <>
-            <Container style={{paddingTop: "40px"}}>
-                <Row>
-                    <Col span={24}>
-                        <Tabs
-                            defaultActiveKey={nsTabKey}
-                            items={items}
-                            onTabClick={onTabClick}
-                            animated={{ inkBar: true, tabPane: false }}
-                            tabPosition="top"
-                        />
-                    </Col>
-                </Row>
-            </Container>
-            <NameServerGroupUpdate/>
-        </>
-    )
-}
+  return (
+    <>
+      {!setupEditNameServerGroupVisible && (
+        <Container style={{ paddingTop: "40px" }}>
+          <Row>
+            <Col span={24}>
+              <Tabs
+                defaultActiveKey={nsTabKey}
+                items={items}
+                onTabClick={onTabClick}
+                animated={{ inkBar: true, tabPane: false }}
+                tabPosition="top"
+              />
+            </Col>
+          </Row>
+        </Container>
+      )}
+      {setupEditNameServerGroupVisible && <NameServerGroupUpdate />}
+      {setupNewNameServerGroupVisible && <NameServerGroupAdd />}
+    </>
+  );
+};
 
-export default DNS;
+export default DNS;

src/views/Peers.tsx

@@ -206,8 +206,6 @@ export const Peers = () => {
     }
   }, [deletedPeer]);
 
-
-
   const filterDataTable = (): Peer[] => {
     const t = textToSearch.toLowerCase().trim();
     let f: Peer[] = filter(peers, (f: Peer) => {
@@ -511,7 +509,14 @@ export const Peers = () => {
 
     let loginExpire = peer.login_expired ? (
       <Tooltip title="The peer is offline and needs to be re-authenticated because its login has expired ">
-        <Tag color="red"><Text style={{fontSize: "10px", color: "rgba(210, 64, 64, 0.85)"}} type={"secondary"}>needs login</Text></Tag>
+        <Tag color="red">
+          <Text
+            style={{ fontSize: "10px", color: "rgba(210, 64, 64, 0.85)" }}
+            type={"secondary"}
+          >
+            needs login
+          </Text>
+        </Tag>
       </Tooltip>
     ) : (
       ""
@@ -519,9 +524,11 @@ export const Peers = () => {
 
     const userEmail = users?.find((u) => u.id === peer.user_id)?.email;
     let expiry = !peer.login_expiration_enabled ? (
-        <Tag>
-          <Text type="secondary" style={{ fontSize: 10 }}>expiration disabled</Text>
-        </Tag>
+      <Tag>
+        <Text type="secondary" style={{ fontSize: 10 }}>
+          expiration disabled
+        </Text>
+      </Tag>
     ) : null;
     if (!userEmail) {
       return (
@@ -573,12 +580,14 @@ export const Peers = () => {
               <Col span={24}>
                 <Title className="page-heading">Peers</Title>
                 {peers.length ? (
-                  <Paragraph style={{marginTop: "5px"}}>
-                    A list of all machines and devices connected to your private network. Use this view to manage peers
+                  <Paragraph style={{ marginTop: "5px" }}>
+                    A list of all machines and devices connected to your private
+                    network. Use this view to manage peers
                   </Paragraph>
                 ) : (
-                  <Paragraph style={{marginTop: "5px"}} type={"secondary"}>
-                    A list of all machines and devices connected to your private network. Use this view to manage peers
+                  <Paragraph style={{ marginTop: "5px" }} type={"secondary"}>
+                    A list of all machines and devices connected to your private
+                    network. Use this view to manage peers
                   </Paragraph>
                 )}
 
@@ -649,7 +658,39 @@ export const Peers = () => {
                     />
                   )}
                   <Card bodyStyle={{ padding: 0 }}>
-                    {!showTutorial && (
+                    {showTutorial && !loading ? (
+                      <Space
+                        direction="vertical"
+                        size="small"
+                        align="center"
+                        style={{
+                          display: "flex",
+                          padding: "45px 15px",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <Title level={4} style={{ textAlign: "center" }}>
+                          Get Started
+                        </Title>
+                        <Paragraph
+                          style={{
+                            textAlign: "center",
+                            whiteSpace: "pre-line",
+                          }}
+                        >
+                          It looks like you don't have any connected machines.{" "}
+                          {"\n"}
+                          Get started by adding one to your network.
+                        </Paragraph>
+                        <Button
+                          size={"middle"}
+                          type="primary"
+                          onClick={() => setAddPeerModalOpen(true)}
+                        >
+                          Add new peer
+                        </Button>
+                      </Space>
+                    ) : (
                       <Table
                         pagination={{
                           pageSize,
@@ -804,39 +845,6 @@ export const Peers = () => {
                         />
                       </Table>
                     )}
-                    {showTutorial && (
-                      <Space
-                        direction="vertical"
-                        size="small"
-                        align="center"
-                        style={{
-                          display: "flex",
-                          padding: "45px 15px",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <Title level={4} style={{ textAlign: "center" }}>
-                          Get Started
-                        </Title>
-                        <Paragraph
-                          style={{
-                            textAlign: "center",
-                            whiteSpace: "pre-line",
-                          }}
-                        >
-                          It looks like you don't have any connected machines.{" "}
-                          {"\n"}
-                          Get started by adding one to your network.
-                        </Paragraph>
-                        <Button
-                          size={"middle"}
-                          type="primary"
-                          onClick={() => setAddPeerModalOpen(true)}
-                        >
-                          Add new peer
-                        </Button>
-                      </Space>
-                    )}
                   </Card>
                 </Space>
               </Col>

src/views/Routes.tsx

@@ -463,9 +463,11 @@ export const Routes = () => {
             </>
           ) : (
             <>
-            <Tag color="default">
-              <Text type="secondary" style={{ fontSize: 12 }}>off</Text>
-            </Tag>
+              <Tag color="default">
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  off
+                </Text>
+              </Tag>
               <Button
                 type="link"
                 style={{ padding: "0" }}
@@ -497,16 +499,13 @@ export const Routes = () => {
     let name = selectedGroup ? selectedGroup.network_id : "";
     confirm({
       icon: <ExclamationCircleOutlined />,
-      title: (
-        <span className="font-500">
-          Delete routes to network {name}
-        </span>
-      ),
+      title: <span className="font-500">Delete routes to network {name}</span>,
       width: 600,
       content: (
         <Space direction="vertical" size="small">
           <Paragraph>
-            This operation will delete all routes to the network {name}. Are you sure?
+            This operation will delete all routes to the network {name}. Are you
+            sure?
           </Paragraph>
           <Alert
             message={
@@ -808,7 +807,11 @@ export const Routes = () => {
               </Col>
             </Row>
 
-            {showTutorial ? (
+            {loading || loadingPeer ? (
+              <div className="container-spinner">
+                <Spin size={"large"} />
+              </div>
+            ) : showTutorial ? (
               <Card bodyStyle={{ padding: 0 }}>
                 <Space
                   direction="vertical"
@@ -849,10 +852,6 @@ export const Routes = () => {
                   </Button>
                 </Space>
               </Card>
-            ) : loading || loadingPeer ? (
-              <div className="container-spinner">
-                <Spin size={"large"} />
-              </div>
             ) : (
               <div className="routes-accordian">
                 <Collapse onChange={callback}>