created a way for rendering is server changed

src/config/locales/en-US.json

@@ -221,7 +221,8 @@
     "error": "Error",
     "fetch_error": "Fetching data failed, please try again or notify us at info@esteem.app",
     "connection_fail": "Connection Failed!",
-    "connection_success": "Successfully connected!"
+    "connection_success": "Successfully connected!",
+    "checking": "Cheking..."
   },
   "post": {
     "reblog_alert": "Are you sure, you want to reblog?",

src/redux/reducers/applicationReducer.js

@@ -41,7 +41,7 @@ const initialState = {
   isLoginDone: false,
   isLogingOut: false,
   isNotificationOpen: true,
-  isPinCodeReqiure: false,
+  isPinCodeRequire: false,
   pinCodeNavigation: {},
   language: 'en-US',
   loading: false, // It is lock to all screen and shows loading animation.
@@ -89,13 +89,13 @@ export default function(state = initialState, action) {
     case OPEN_PIN_CODE_MODAL:
       return {
         ...state,
-        isPinCodeReqiure: true,
+        isPinCodeRequire: true,
         pinCodeNavigation: action.payload || {},
       };
     case CLOSE_PIN_CODE_MODAL:
       return {
         ...state,
-        isPinCodeReqiure: false,
+        isPinCodeRequire: false,
       };
     case ACTIVE_APPLICATION:
       return {

src/screens/application/container/applicationContainer.js

@@ -114,9 +114,19 @@ class ApplicationContainer extends Component {
   };
 
   componentWillReceiveProps(nextProps) {
-    const { isDarkTheme: _isDarkTheme, selectedLanguage, isLogingOut, isConnected } = this.props;
+    const {
+      isDarkTheme: _isDarkTheme,
+      selectedLanguage,
+      isLogingOut,
+      isConnected,
+      api,
+    } = this.props;
 
-    if (_isDarkTheme !== nextProps.isDarkTheme || selectedLanguage !== nextProps.selectedLanguage) {
+    if (
+      _isDarkTheme !== nextProps.isDarkTheme ||
+      selectedLanguage !== nextProps.selectedLanguage ||
+      (api !== nextProps.api && nextProps.api)
+    ) {
       this.setState({ isRenderRequire: false }, () => this.setState({ isRenderRequire: true }));
       if (nextProps.isDarkTheme) {
         changeNavigationBarColor('#1e2835');
@@ -645,7 +655,7 @@ class ApplicationContainer extends Component {
       toastNotification,
       isDarkTheme: _isDarkTheme,
       children,
-      isPinCodeReqiure,
+      isPinCodeRequire,
     } = this.props;
     const { isRenderRequire, isReady, isThemeReady } = this.state;
 
@@ -657,7 +667,7 @@ class ApplicationContainer extends Component {
         isReady,
         isRenderRequire,
         isThemeReady,
-        isPinCodeReqiure,
+        isPinCodeRequire,
         isDarkTheme: _isDarkTheme,
         locale: selectedLanguage,
       })
@@ -676,8 +686,9 @@ export default connect(
     isLoggedIn: state.application.isLoggedIn,
     isConnected: state.application.isConnected,
     nav: state.nav.routes,
-    isPinCodeReqiure: state.application.isPinCodeReqiure,
+    isPinCodeRequire: state.application.isPinCodeRequire,
     isActiveApp: state.application.isActive,
+    api: state.application.api,
 
     // Account
     unreadActivityCount: state.account.currentAccount.unread_activity_count,

src/screens/application/index.js

@@ -17,7 +17,7 @@ const Application = () => (
       isDarkTheme,
       isRenderRequire,
       isThemeReady,
-      isPinCodeReqiure,
+      isPinCodeRequire,
     }) => {
       if (!isReady || !isRenderRequire || !isThemeReady) {
         return <Launch />;
@@ -25,7 +25,7 @@ const Application = () => (
       return (
         <Fragment>
           <Modal
-            isOpen={isPinCodeReqiure}
+            isOpen={isPinCodeRequire}
             isFullScreen
             swipeToClose={false}
             backButtonClose={false}

src/screens/settings/container/settingsContainer.js

@@ -126,8 +126,7 @@ class SettingsContainer extends Component {
     let isError = false;
     let alertMessage;
     const client = new Client(server, { timeout: 3000 });
-
-    dispatch(setApi(server));
+    dispatch(setApi(''));
 
     this.setState({ isLoading: true });
 
@@ -137,7 +136,9 @@ class SettingsContainer extends Component {
       isError = true;
       alertMessage = 'alert.connection_fail';
     } finally {
-      if (!isError) alertMessage = 'alert.connection_success';
+      if (!isError) {
+        alertMessage = 'alert.connection_success';
+      }
     }
 
     if (!isError) {
@@ -158,6 +159,7 @@ class SettingsContainer extends Component {
       dispatch(setApi(selectedApi));
     } else {
       await setServer(server);
+      dispatch(setApi(server));
       checkClient();
     }
 

src/screens/settings/screen/settingsScreen.js

@@ -121,7 +121,12 @@ class SettingsScreen extends PureComponent {
               actionType="api"
               options={serverList.map(serverName => groomingServerName(serverName))}
               selectedOptionIndex={serverList.indexOf(selectedApi)}
-              defaultText={groomingServerName(selectedApi)}
+              defaultText={
+                groomingServerName(selectedApi) ||
+                intl.formatMessage({
+                  id: 'alert.checking',
+                })
+              }
               handleOnChange={handleOnChange}
             />
             <SettingsItem