Fix icon && Loading indicator

Author: LasCC

src/assets/img/icons/get_started128.png

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Layout, Menu, Typography, Button, Badge, Select, } from 'antd';
 import { CopyrightCircleOutlined, FullscreenOutlined, ArrowsAltOutlined } from '@ant-design/icons';
 import { createFromIconfontCN } from '@ant-design/icons';
@@ -174,8 +174,8 @@ export default function LayoutApp ( props: {
         </Menu.Item>
     ) );
 
-    const useMenuIndex = PersistedState( 'tab_index_cache' );
-    const [ index, setIndex ] = useMenuIndex( '1' );
+    //const useMenuIndex = PersistedState( 'tab_index_cache' ); // Disabled for now
+    const [ index, setIndex ] = useState( '1' );
 
     const navigate = ( { componentRoute, key }: { componentRoute: React.FunctionComponent; key: string } ) => {
         goTo( componentRoute );

src/assets/img/icons/get_started16.png

@@ -95,7 +95,7 @@ export default function ReverseShell () {
                 </Clipboard>
             </div>
             <Divider orientation='center'>Zsh</Divider>
-            <div style={{ padding: 10, marginTop: 15 }} key='a'>
+            <div style={{ padding: 10, marginTop: 15 }} key='b'>
                 <Paragraph>
                     <pre>
                         <Text copyable>{zsh_rshell}</Text>
@@ -121,7 +121,7 @@ export default function ReverseShell () {
                 </Clipboard>
             </div>
             <Divider orientation='center'>Netcat</Divider>
-            <div style={{ padding: 10, marginTop: 15 }} key='b'>
+            <div style={{ padding: 10, marginTop: 15 }} key='c'>
                 <Paragraph>
                     <pre>
                         <Text copyable>{netcat_rshell}</Text>
@@ -148,7 +148,7 @@ export default function ReverseShell () {
             </div>
             <Divider orientation='center'>PHP</Divider>
             <div
-                key='c'
+                key='d'
                 style={{
                     padding: 15,
                     marginTop: 15
@@ -181,7 +181,7 @@ export default function ReverseShell () {
             </div>
 
             <Divider orientation='center'>PowerShell</Divider>
-            <div style={{ padding: 10, marginTop: 15 }} key='a'>
+            <div style={{ padding: 10, marginTop: 15 }} key='e'>
                 <Paragraph>
                     <pre>
                         <Text copyable>{PS_rshell}</Text>
@@ -207,7 +207,7 @@ export default function ReverseShell () {
                 </Clipboard>
             </div>
             <div
-                key='d'
+                key='f'
                 style={{
                     padding: 15,
                     marginTop: 15
@@ -241,7 +241,7 @@ export default function ReverseShell () {
             </div>
             <Divider orientation='center'>Python</Divider>
             <div
-                key='e'
+                key='g'
                 style={{
                     padding: 15,
                     marginTop: 15
@@ -274,7 +274,7 @@ export default function ReverseShell () {
             </div>
             <Divider orientation='center'>Ruby</Divider>
             <div
-                key='f'
+                key='h'
                 style={{
                     padding: 15,
                     marginTop: 15
@@ -306,7 +306,7 @@ export default function ReverseShell () {
                 </Clipboard>
             </div>
             <Divider orientation='center'>Telnet</Divider>
-            <div style={{ padding: 15, marginTop: 15 }} key='g'>
+            <div style={{ padding: 15, marginTop: 15 }} key='i'>
                 <Paragraph>
                     <pre>
                         <Text copyable>{telnet_rshell}</Text>

src/assets/img/icons/get_started32.png

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Suspense, useEffect } from 'react';
 import { LazyStyle, Theme } from './types';
-import LoadingIndicator from './LoadingIndicator';
 
 export function useApplyStyles ( styles: LazyStyle ): void {
     useEffect( () => {
@@ -19,7 +18,7 @@ export default function DynamicTheme ( { themes, value }: DynamicThemeProps ) {
     const Component: any = themes.find( theme => theme.id === value )?.component;
 
     return (
-        <Suspense fallback={<LoadingIndicator tip="loading" />}>
+        <Suspense fallback={<div>loading styles..</div>}>
             <Component />
         </Suspense>
     );