Merge branch 'develop'v5.0.0-beta.21

47 files changed, 736 insertions, 296 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 4fb0e6a59..ac8fdbe5b 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { RouteTransition } from 'react-router-transition';
 import { intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
 
@@ -16,7 +15,6 @@ import { isWindows } from '../../environment';
 export default @observer class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
-    pathname: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
     isOnline: PropTypes.bool.isRequired,
     isAPIHealthy: PropTypes.bool.isRequired,
@@ -33,7 +31,6 @@ export default @observer class AuthLayout extends Component {
   render() {
     const {
       children,
-      pathname,
       error,
       isOnline,
       isAPIHealthy,
@@ -46,8 +43,8 @@ export default @observer class AuthLayout extends Component {
 
     return (
       <div className={darkMode ? 'theme__dark' : ''}>
-        {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
-        <div className={'auth'}>
+        {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+        <div className="auth">
           {!isOnline && (
             <InfoBar
               type="warning"
@@ -69,22 +66,10 @@ export default @observer class AuthLayout extends Component {
             </InfoBar>
           )}
           <div className="auth__layout">
-            <RouteTransition
-              pathname={pathname}
-              atEnter={{ opacity: 0 }}
-              atLeave={{ opacity: 0 }}
-              atActive={{ opacity: 1 }}
-              mapStyles={styles => ({
-                transform: `translateX(${styles.translateX}%)`,
-                opacity: styles.opacity,
-              })}
-              component="span"
-            >
-              {/* Inject globalError into children  */}
-              {React.cloneElement(children, {
-                error,
-              })}
-            </RouteTransition>
+            {/* Inject globalError into children  */}
+            {React.cloneElement(children, {
+              error,
+            })}
           </div>
           {/* </div> */}
           <Link to="https://adlk.io" className="auth__adlk" target="_blank">
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 96821a61a..fd957ee73 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -127,7 +127,7 @@ export default @observer class Invite extends Component {
     });
 
     const renderForm = (
-      <div>
+      <Fragment>
         {this.state.showSuccessInfo && isInviteSuccessful && (
           <Appear>
             <Infobox
@@ -141,11 +141,13 @@ export default @observer class Invite extends Component {
         )}
 
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          {!embed && (<img
-            src="./assets/images/logo.svg"
-            className="auth__logo"
-            alt=""
-          />)}
+          {!embed && (
+            <img
+              src="./assets/images/logo.svg"
+              className="auth__logo"
+              alt=""
+            />
+          )}
           <h1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
           </h1>
@@ -164,14 +166,16 @@ export default @observer class Invite extends Component {
             label={intl.formatMessage(messages.submitButtonLabel)}
             loaded={!isLoadingInvite}
           />
-          {!embed && (<Link
-            to="/"
-            className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
-          >
-            {intl.formatMessage(messages.skipButtonLabel)}
-          </Link>)}
+          {!embed && (
+            <Link
+              to="/"
+              className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+            >
+              {intl.formatMessage(messages.skipButtonLabel)}
+            </Link>
+          )}
         </form>
-      </div>
+      </Fragment>
     );
 
     return (
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index f465b35a5..5d21f8b60 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -11,11 +11,8 @@ import Button from '../ui/Button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
 
-
 import { globalError as globalErrorPropType } from '../../prop-types';
 
-// import Appear from '../ui/effects/Appear';
-
 const messages = defineMessages({
   headline: {
     id: 'login.headline',
@@ -86,18 +83,18 @@ export default @observer class Login extends Component {
     },
   }, this.context.intl);
 
+  emailField = null;
+
   submit(e) {
     e.preventDefault();
     this.form.submit({
       onSuccess: (form) => {
         this.props.onSubmit(form.values());
       },
-      onError: () => {},
+      onError: () => { },
     });
   }
 
-  emailField = null;
-
   render() {
     const { form } = this;
     const { intl } = this.context;
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index f08129568..7ab14f429 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -69,18 +69,29 @@ export default @observer class Signup extends Component {
                 donor.amount ? (
                   <span>
                     <p>
-                      Thank you so much for your previous donation of <strong>$ {donor.amount}</strong>.
+                      Thank you so much for your previous donation of
+                      {' '}
+                      <strong>
+                        $
+                        {donor.amount}
+                      </strong>
+                      .
                       <br />
                       Your support allowed us to get where we are today.
                       <br />
                     </p>
                     <p>
-                      As an early supporter, you get <strong>a lifetime premium supporter license</strong> without any
+                      As an early supporter, you get
+                      {' '}
+                      <strong>a lifetime premium supporter license</strong>
+                      {' '}
+                      without any
                       additional charges.
                     </p>
                     <p>
                       However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
-                      <br /><br />
+                      <br />
+                      <br />
                     </p>
                   </span>
                 ) : (
@@ -113,12 +124,6 @@ export default @observer class Signup extends Component {
                   hideInfo={Boolean(donor.amount)}
                   skipButtonLabel={intl.formatMessage(messages.skipPayment)}
                 />
-                {/* <Link
-                  to={inviteRoute}
-                  className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
-                >
-                  {intl.formatMessage(messages.skipPayment)}
-                </Link> */}
               </Appear>
             </Loader>
           </form>
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index bbcad8b67..d9b83eeb8 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -199,7 +199,8 @@ export default @observer class Signup extends Component {
                 className="link"
               >
                 {intl.formatMessage(messages.privacy)}
-              </Link>.
+              </Link>
+              .
             </p>
           </form>
           <div className="auth__links">
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 3ababe54a..dbe0bb4b6 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,6 +6,8 @@ import { TitleBar } from 'electron-react-titlebar';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
+import ErrorBoundary from '../util/ErrorBoundary';
+
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
@@ -94,74 +96,78 @@ export default @observer class AppLayout extends Component {
     const { intl } = this.context;
 
     return (
-      <div className={(darkMode ? 'theme__dark' : '')}>
-        <div className="app">
-          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
-          <div className="app__content">
-            {sidebar}
-            <div className="app__service">
-              {news.length > 0 && news.map(item => (
-                <InfoBar
-                  key={item.id}
-                  position="top"
-                  type={item.type}
-                  sticky={item.sticky}
-                  onHide={() => removeNewsItem({ newsId: item.id })}
-                >
-                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
-                </InfoBar>
-              ))}
-              {!isOnline && (
-                <InfoBar
-                  type="danger"
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                </InfoBar>
-              )}
-              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                </InfoBar>
-              )}
-              {showServicesUpdatedInfoBar && (
-                <InfoBar
-                  type="primary"
-                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                  onClick={reloadServicesAfterUpdate}
-                  sticky
-                >
-                  <span className="mdi mdi-power-plug" />
-                  {intl.formatMessage(messages.servicesUpdated)}
-                </InfoBar>
-              )}
-              {appUpdateIsDownloaded && (
-                <InfoBar
-                  type="primary"
-                  ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
-                  onClick={installAppUpdate}
-                  sticky
-                >
-                  <span className="mdi mdi-information" />
-                  {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
-                    <u>{intl.formatMessage(messages.changelog)}</u>
-                  </a>
-                </InfoBar>
-              )}
-              {isDelayAppScreenVisible && (<DelayApp />)}
-              {services}
+      <ErrorBoundary>
+        <div className={(darkMode ? 'theme__dark' : '')}>
+          <div className="app">
+            {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+            <div className="app__content">
+              {sidebar}
+              <div className="app__service">
+                {news.length > 0 && news.map(item => (
+                  <InfoBar
+                    key={item.id}
+                    position="top"
+                    type={item.type}
+                    sticky={item.sticky}
+                    onHide={() => removeNewsItem({ newsId: item.id })}
+                  >
+                    <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  </InfoBar>
+                ))}
+                {!isOnline && (
+                  <InfoBar
+                    type="danger"
+                  >
+                    <span className="mdi mdi-flash" />
+                    {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+                  </InfoBar>
+                )}
+                {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                  <InfoBar
+                    type="danger"
+                    ctaLabel="Try again"
+                    ctaLoading={areRequiredRequestsLoading}
+                    sticky
+                    onClick={retryRequiredRequests}
+                  >
+                    <span className="mdi mdi-flash" />
+                    {intl.formatMessage(messages.requiredRequestsFailed)}
+                  </InfoBar>
+                )}
+                {showServicesUpdatedInfoBar && (
+                  <InfoBar
+                    type="primary"
+                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                    onClick={reloadServicesAfterUpdate}
+                    sticky
+                  >
+                    <span className="mdi mdi-power-plug" />
+                    {intl.formatMessage(messages.servicesUpdated)}
+                  </InfoBar>
+                )}
+                {appUpdateIsDownloaded && (
+                  <InfoBar
+                    type="primary"
+                    ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+                    onClick={installAppUpdate}
+                    sticky
+                  >
+                    <span className="mdi mdi-information" />
+                    {intl.formatMessage(messages.updateAvailable)}
+                    {' '}
+                    <a href="https://meetfranz.com/changelog" target="_blank">
+                      <u>{intl.formatMessage(messages.changelog)}</u>
+                    </a>
+                  </InfoBar>
+                )}
+                {isDelayAppScreenVisible && (<DelayApp />)}
+                {services}
+              </div>
             </div>
           </div>
+          {children}
         </div>
-        {children}
-      </div>
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 6ea95bf88..609a3b604 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -65,6 +65,7 @@ export default @observer class Sidebar extends Component {
           disableToolTip={() => this.disableToolTip()}
         />
         <button
+          type="button"
           onClick={toggleMuteApp}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
@@ -72,6 +73,7 @@ export default @observer class Sidebar extends Component {
           <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
         </button>
         <button
+          type="button"
           onClick={() => openSettings({ path: 'recipes' })}
           className="sidebar__button sidebar__button--new-service"
           data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
@@ -79,6 +81,7 @@ export default @observer class Sidebar extends Component {
           <i className="mdi mdi-plus-box" />
         </button>
         <button
+          type="button"
           onClick={() => openSettings({ path: 'app' })}
           className="sidebar__button sidebar__button--settings"
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
new file mode 100644
index 000000000..415a8d1b5
--- /dev/null
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import Button from '../../../ui/Button';
+
+import styles from './styles';
+
+const messages = defineMessages({
+  headline: {
+    id: 'service.errorHandler.headline',
+    defaultMessage: '!!!Oh no!',
+  },
+  text: {
+    id: 'service.errorHandler.text',
+    defaultMessage: '!!!{name} has failed to load.',
+  },
+  action: {
+    id: 'service.errorHandler.action',
+    defaultMessage: '!!!Reload {name}',
+  },
+  editAction: {
+    id: 'service.errorHandler.editAction',
+    defaultMessage: '!!!Edit {name}',
+  },
+  errorMessage: {
+    id: 'service.errorHandler.message',
+    defaultMessage: '!!!Error:',
+  },
+});
+
+export default @injectSheet(styles) @observer class WebviewCrashHandler extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    reload: PropTypes.func.isRequired,
+    edit: PropTypes.func.isRequired,
+    errorMessage: PropTypes.string.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      name,
+      reload,
+      edit,
+      errorMessage,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.component}>
+        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <p>{intl.formatMessage(messages.text, { name })}</p>
+        <p>
+          <strong>
+            {intl.formatMessage(messages.errorMessage)}
+:
+          </strong>
+          {' '}
+          {errorMessage}
+        </p>
+        <div className={classes.buttonContainer}>
+          <Button
+            label={intl.formatMessage(messages.editAction, { name })}
+            buttonType="inverted"
+            onClick={() => edit()}
+          />
+          <Button
+            label={intl.formatMessage(messages.action, { name })}
+            buttonType="inverted"
+            onClick={() => reload()}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
new file mode 100644
index 000000000..f11386798
--- /dev/null
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -0,0 +1,25 @@
+export default {
+  component: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: 0,
+    alignItems: 'center',
+    // background: $theme-gray-lighter;
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: 'auto',
+    margin: [40, 0, 20],
+
+    '& button': {
+      margin: [0, 10, 0, 10],
+    },
+  },
+};
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index 58fb38d8c..d0f12256e 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -27,6 +27,7 @@ export default @observer class ServiceDisabled extends Component {
   };
 
   countdownInterval = null;
+
   countdownIntervalTimeout = 1000;
 
   render() {
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 7163209ee..b1a2c0207 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
@@ -7,7 +7,9 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
+import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
+import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 
 export default @observer class ServiceWebview extends Component {
@@ -15,8 +17,10 @@ export default @observer class ServiceWebview extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    edit: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
     enable: PropTypes.func.isRequired,
+    isActive: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -29,8 +33,12 @@ export default @observer class ServiceWebview extends Component {
     statusBarVisible: false,
   };
 
+  autorunDisposer = null;
+
+  webview = null;
+
   componentDidMount() {
-    autorun(() => {
+    this.autorunDisposer = autorun(() => {
       if (this.props.service.isActive) {
         this.setState({ forceRepaint: true });
         setTimeout(() => {
@@ -40,6 +48,10 @@ export default @observer class ServiceWebview extends Component {
     });
   }
 
+  componentWillUnmount() {
+    this.autorunDisposer();
+  }
+
   updateTargetUrl = (event) => {
     let visible = true;
     if (event.url === '' || event.url === '#') {
@@ -51,13 +63,12 @@ export default @observer class ServiceWebview extends Component {
     });
   }
 
-  webview = null;
-
   render() {
     const {
       service,
       setWebviewReference,
       reload,
+      edit,
       isAppMuted,
       enable,
     } = this.props;
@@ -78,25 +89,47 @@ export default @observer class ServiceWebview extends Component {
 
     return (
       <div className={webviewClasses}>
-        {service.hasCrashed && (
-          <WebviewCrashHandler
-            name={service.recipe.name}
-            webview={service.webview}
-            reload={reload}
-          />
+        {service.isActive && service.isEnabled && (
+          <Fragment>
+            {service.hasCrashed && (
+              <WebviewCrashHandler
+                name={service.recipe.name}
+                webview={service.webview}
+                reload={reload}
+              />
+            )}
+            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+              <WebviewLoader
+                loaded={false}
+                name={service.name}
+              />
+            )}
+            {service.isError && (
+              <WebviewErrorHandler
+                name={service.recipe.name}
+                errorMessage={service.errorMessage}
+                reload={reload}
+                edit={edit}
+              />
+            )}
+          </Fragment>
         )}
         {!service.isEnabled ? (
-          <ServiceDisabled
-            name={service.recipe.name}
-            webview={service.webview}
-            enable={enable}
-          />
+          <Fragment>
+            {service.isActive && (
+              <ServiceDisabled
+                name={service.recipe.name}
+                webview={service.webview}
+                enable={enable}
+              />
+            )}
+          </Fragment>
         ) : (
           <Webview
             ref={(element) => { this.webview = element; }}
             autosize
             src={service.url}
-            preload="./webview/plugin.js"
+            preload="./webview/recipe.js"
             partition={`persist:service-${service.id}`}
             onDidAttach={() => setWebviewReference({
               serviceId: service.id,
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 4cbd51043..1aeb17e03 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -20,18 +20,18 @@ const messages = defineMessages({
 
 export default @observer class Services extends Component {
   static propTypes = {
-    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
     handleIPCMessage: PropTypes.func.isRequired,
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
     update: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
     services: [],
-    activeService: '',
   };
 
   static contextTypes = {
@@ -45,6 +45,7 @@ export default @observer class Services extends Component {
       setWebviewReference,
       openWindow,
       reload,
+      openSettings,
       isAppMuted,
       update,
     } = this.props;
@@ -79,6 +80,7 @@ export default @observer class Services extends Component {
             setWebviewReference={setWebviewReference}
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
+            edit={() => openSettings({ path: `services/edit/${service.id}` })}
             isAppMuted={isAppMuted}
             enable={() => update({
               serviceId: service.id,
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 3be1fccf4..42bc3c877 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -38,13 +38,18 @@ export default @observer class WebviewCrashHandler extends Component {
     countdown: 10000,
   }
 
+  countdownInterval = null;
+
+  countdownIntervalTimeout = 1000;
+
+
   componentDidMount() {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
-      this.setState({
-        countdown: this.state.countdown - this.countdownIntervalTimeout,
-      });
+      this.setState(prevState => ({
+        countdown: prevState.countdown - this.countdownIntervalTimeout,
+      }));
 
       if (this.state.countdown <= 0) {
         reload();
@@ -53,9 +58,6 @@ export default @observer class WebviewCrashHandler extends Component {
     }, this.countdownIntervalTimeout);
   }
 
-  countdownInterval = null;
-  countdownIntervalTimeout = 1000;
-
   render() {
     const { name, reload } = this.props;
     const { intl } = this.context;
@@ -70,10 +72,12 @@ export default @observer class WebviewCrashHandler extends Component {
           buttonType="inverted"
           onClick={() => reload()}
         />
-        <p className="footnote">{intl.formatMessage(messages.autoReload, {
-          name,
-          seconds: this.state.countdown / 1000,
-        })}</p>
+        <p className="footnote">
+          {intl.formatMessage(messages.autoReload, {
+            name,
+            seconds: this.state.countdown / 1000,
+          })}
+        </p>
       </div>
     );
   }
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 3cb08feb1..72ba7b2e3 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 
+import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 
@@ -36,18 +37,22 @@ export default @observer class SettingsLayout extends Component {
     return (
       <Appear transitionName="fadeIn-fast">
         <div className="settings-wrapper">
-          <button
-            className="settings-wrapper__action"
-            onClick={closeSettings}
-          />
-          <div className="settings franz-form">
-            {navigation}
-            {children}
+          <ErrorBoundary>
             <button
-              className="settings__close mdi mdi-close"
+              type="button"
+              className="settings-wrapper__action"
               onClick={closeSettings}
             />
-          </div>
+            <div className="settings franz-form">
+              {navigation}
+              {children}
+              <button
+                type="button"
+                className="settings__close mdi mdi-close"
+                onClick={closeSettings}
+              />
+            </div>
+          </ErrorBoundary>
         </div>
       </Appear>
     );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 06c7074dd..9c9543749 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -132,21 +132,19 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!isLoading && userInfoRequestFailed && (
-            <div>
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryUserInfoRequest}
-              >
-                {intl.formatMessage(messages.userInfoRequestFailed)}
-              </Infobox>
-            </div>
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
           )}
 
           {!userInfoRequestFailed && (
-            <div>
+            <Fragment>
               {!isLoading && (
                 <div className="account">
                   <div className="account__box account__box--flex">
@@ -169,7 +167,8 @@ export default @observer class AccountDashboard extends Component {
                         {`${user.firstname} ${user.lastname}`}
                       </h2>
                       {user.organization && `${user.organization}, `}
-                      {user.email}<br />
+                      {user.email}
+                      <br />
                       {!user.isEnterprise && !user.isPremium && (
                         <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span>
                       )}
@@ -194,7 +193,7 @@ export default @observer class AccountDashboard extends Component {
                 ) : (
                   <div className="account franz-form">
                     {orders.length > 0 && (
-                      <div>
+                      <Fragment>
                         <div className="account__box">
                           <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
                           <div className="account__subscription">
@@ -219,6 +218,7 @@ export default @observer class AccountDashboard extends Component {
                                   </td>
                                   <td className="invoices__action">
                                     <button
+                                      type="button"
                                       onClick={() => openExternalUrl(order.invoiceUrl)}
                                     >
                                       {intl.formatMessage(messages.invoiceDownload)}
@@ -229,7 +229,7 @@ export default @observer class AccountDashboard extends Component {
                             </tbody>
                           </table>
                         </div>
-                      </div>
+                      </Fragment>
                     )}
                   </div>
                 )
@@ -262,20 +262,6 @@ export default @observer class AccountDashboard extends Component {
                 </div>
               )}
 
-              {user.isMiner && (
-                <div className="account franz-form">
-                  <div className="account__box account__box">
-                    <h2>Miner Info</h2>
-                    <div className="account__subscription">
-                      <div>
-                        <p>To maintain a high security level for all our Franz users, we had to remove the miner. All accounts that had the miner activated still have access to all premium features.</p>
-                        <p>Every financial support is still much appreciated.</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               {!user.isEnterprise && !user.isPremium && (
                 isLoadingPlans ? (
                   <Loader />
@@ -312,7 +298,7 @@ export default @observer class AccountDashboard extends Component {
                   </div>
                 </div>
               )}
-            </div>
+            </Fragment>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index b86d94ac7..953f702f8 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -59,7 +59,9 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           className="settings-navigation__link"
           activeClassName="is-active"
         >
-          {intl.formatMessage(messages.yourServices)} <span className="badge">{serviceCount}</span>
+          {intl.formatMessage(messages.yourServices)}
+          {' '}
+          <span className="badge">{serviceCount}</span>
         </Link>
         <Link
           to="/settings/user"
@@ -93,4 +95,3 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
     );
   }
 }
-
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index dae8891b3..3bb0852b2 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -15,6 +15,7 @@ export default @observer class RecipeItem extends Component {
 
     return (
       <button
+        type="button"
         className="recipe-teaser"
         onClick={onClick}
       >
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index cd783200f..00cd725cf 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -129,11 +129,17 @@ export default @observer class RecipesDashboard extends Component {
                 activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
                 onClick={() => resetSearch()}
               >
-                {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
+                {intl.formatMessage(messages.devRecipes)}
+                {' '}
+(
+                {devRecipesCount}
+)
               </Link>
             )}
             <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
-              {intl.formatMessage(messages.missingService)} <i className="mdi mdi-open-in-new" />
+              {intl.formatMessage(messages.missingService)}
+              {' '}
+              <i className="mdi mdi-open-in-new" />
             </a>
           </div>
           {/* )} */}
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index d16ec35b8..468d85c45 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
@@ -14,6 +14,7 @@ import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
 import ImageUpload from '../../ui/ImageUpload';
+import Select from '../../ui/Select';
 
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
@@ -96,7 +97,11 @@ const messages = defineMessages({
   },
   headlineProxy: {
     id: 'settings.service.form.proxy.headline',
-    defaultMessage: '!!!Proxy Settings',
+    defaultMessage: '!!!HTTP/HTTPS Proxy Settings',
+  },
+  proxyRestartInfo: {
+    id: 'settings.service.form.proxy.restartInfo',
+    defaultMessage: '!!!Please restart Franz after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
@@ -129,6 +134,7 @@ export default @observer class EditServiceForm extends Component {
   static defaultProps = {
     service: {},
   };
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -270,14 +276,14 @@ export default @observer class EditServiceForm extends Component {
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     {user.isPremium || recipe.author.find(a => a.email === user.email) ? (
-                      <div>
+                      <Fragment>
                         <Input field={form.$('customUrl')} />
                         {form.error === 'url-validation-error' && (
                           <p className="franz-form__error">
                             {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
                           </p>
                         )}
-                      </div>
+                      </Fragment>
                     ) : (
                       <div className="center premium-info">
                         <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
@@ -307,12 +313,12 @@ export default @observer class EditServiceForm extends Component {
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <div>
+                    <Fragment>
                       <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
                       <p className="settings__help">
                         {intl.formatMessage(messages.indirectMessageInfo)}
                       </p>
-                    </div>
+                    </Fragment>
                   )}
                 </div>
 
@@ -333,6 +339,12 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
+            <PremiumFeatureContainer>
+              <div className="settings__settings-group">
+                <Select field={form.$('spellcheckerLanguage')} />
+              </div>
+            </PremiumFeatureContainer>
+
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}>
                 <div className="settings__settings-group">
@@ -342,18 +354,31 @@ export default @observer class EditServiceForm extends Component {
                   </h3>
                   <Toggle field={form.$('proxy.isEnabled')} />
                   {form.$('proxy.isEnabled').value && (
-                    <div>
-                      <Input field={form.$('proxy.host')} />
-                      <Input field={form.$('proxy.user')} />
-                      <Input
-                        field={form.$('proxy.password')}
-                        showPasswordToggle
-                      />
+                    <Fragment>
+                      <div className="grid">
+                        <div className="grid__row">
+                          <Input field={form.$('proxy.host')} className="proxyHost" />
+                          <Input field={form.$('proxy.port')} />
+                        </div>
+                      </div>
+                      <div className="grid">
+                        <div className="grid__row">
+                          <Input field={form.$('proxy.user')} />
+                          <Input
+                            field={form.$('proxy.password')}
+                            showPasswordToggle
+                          />
+                        </div>
+                      </div>
+                      <p>
+                        <span className="mdi mdi-information" />
+                        {intl.formatMessage(messages.proxyRestartInfo)}
+                      </p>
                       <p>
                         <span className="mdi mdi-information" />
                         {intl.formatMessage(messages.proxyInfo)}
                       </p>
-                    </div>
+                    </Fragment>
                   )}
                 </div>
               </PremiumFeatureContainer>
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 84080519b..ebc618a00 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -27,6 +27,7 @@ export default @observer class ServiceItem extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     goToServiceForm: PropTypes.func.isRequired,
   };
+
   static contextTypes = {
     intl: intlShape,
   };
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index e7dfaf106..a12df7372 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -101,17 +101,15 @@ export default @observer class ServicesDashboard extends Component {
             />
           )}
           {!isLoading && servicesRequestFailed && (
-            <div>
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadServices)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryServicesRequest}
-              >
-                {intl.formatMessage(messages.servicesRequestFailed)}
-              </Infobox>
-            </div>
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadServices)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryServicesRequest}
+            >
+              {intl.formatMessage(messages.servicesRequestFailed)}
+            </Infobox>
           )}
 
           {status.length > 0 && status.includes('updated') && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 1ec2ab614..a92e559f3 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -1,5 +1,5 @@
 import { remote } from 'electron';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -171,21 +171,23 @@ export default @observer class EditSettingsForm extends Component {
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
             >
-              <div>
+              <Fragment>
                 <Toggle
                   field={form.$('enableSpellchecking')}
                 />
                 {form.$('enableSpellchecking').value && (
                   <Select field={form.$('spellcheckerLanguage')} />
                 )}
-              </div>
+              </Fragment>
             </PremiumFeatureContainer>
             <a
               href={FRANZ_TRANSLATION}
               target="_blank"
               className="link"
             >
-              {intl.formatMessage(messages.translationHelp)} <i className="mdi mdi-open-in-new" />
+              {intl.formatMessage(messages.translationHelp)}
+              {' '}
+              <i className="mdi mdi-open-in-new" />
             </a>
 
             {/* Advanced */}
@@ -233,7 +235,9 @@ export default @observer class EditSettingsForm extends Component {
             )}
             <br />
             <Toggle field={form.$('beta')} />
-            {intl.formatMessage(messages.currentVersion)} {remote.app.getVersion()}
+            {intl.formatMessage(messages.currentVersion)}
+            {' '}
+            {remote.app.getVersion()}
           </form>
         </div>
       </div>
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index b825f844a..0e3ac6b10 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -48,10 +48,6 @@ export default @observer class EditServiceForm extends Component {
     isEnterprise: PropTypes.bool.isRequired,
   };
 
-  static defaultProps = {
-    service: {},
-  };
-
   static contextTypes = {
     intl: intlShape,
   };
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 12e8471ff..90da8ddc3 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -81,8 +81,7 @@ export default @observer class SubscriptionForm extends Component {
     hideInfo: PropTypes.bool.isRequired,
   };
 
-  static defaultProps ={
-    content: '',
+  static defaultProps = {
     showSkipOption: false,
     skipAction: () => null,
     skipButtonLabel: '',
@@ -158,35 +157,33 @@ export default @observer class SubscriptionForm extends Component {
         <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
         {!hideInfo && (
           <div className="subscription__premium-info">
-            <div>
-              <p>
-                <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-              </p>
-              <div className="subscription">
-                <ul className="subscription__premium-features">
-                  <li>{intl.formatMessage(messages.features.onpremise)}</li>
-                  <li>
-                    {intl.formatMessage(messages.features.noInterruptions)}
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.spellchecker)}
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.proxy)}
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.ads)}
-                  </li>
-                </ul>
-              </div>
+            <p>
+              <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
+            </p>
+            <div className="subscription">
+              <ul className="subscription__premium-features">
+                <li>{intl.formatMessage(messages.features.onpremise)}</li>
+                <li>
+                  {intl.formatMessage(messages.features.noInterruptions)}
+                </li>
+                <li>
+                  {intl.formatMessage(messages.features.spellchecker)}
+                </li>
+                <li>
+                  {intl.formatMessage(messages.features.proxy)}
+                </li>
+                <li>
+                  {intl.formatMessage(messages.features.ads)}
+                </li>
+              </ul>
             </div>
           </div>
         )}
-        <div>
+        <Fragment>
           {error.code === 'no-payment-session' && (
             <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
           )}
-        </div>
+        </Fragment>
         {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
           <Button
             label={skipButtonLabel}
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index f3c63e7ee..b5d7c4b2d 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -46,7 +46,9 @@ export default @observer class SubscriptionPopup extends Component {
   }
 
   render() {
-    const { url, closeWindow, completeCheck, isCompleted } = this.props;
+    const {
+      url, closeWindow, completeCheck, isCompleted,
+    } = this.props;
     const { intl } = this.context;
 
     return (
diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js
deleted file mode 100644
index ac3cdcb05..000000000
--- a/src/components/ui/AppLoader.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import Appear from '../../components/ui/effects/Appear';
-import Loader from '../../components/ui/Loader';
-
-export default function () {
-  return (
-    <div className="app-loader">
-      <Appear>
-        <h1 className="app-loader__title">Franz</h1>
-        <Loader color="#FFF" />
-      </Appear>
-    </div>
-  );
-}
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
new file mode 100644
index 000000000..61053f6d1
--- /dev/null
+++ b/src/components/ui/AppLoader/index.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet, { withTheme } from 'react-jss';
+import classnames from 'classnames';
+
+import FullscreenLoader from '../FullscreenLoader';
+import { shuffleArray } from '../../../helpers/array-helpers';
+
+import styles from './styles';
+
+const textList = shuffleArray([
+  'Looking for Sisi',
+  'Contacting the herald',
+  'Saddling the unicorn',
+  'Learning the Waltz',
+  'Visiting Horst & Grete',
+  'Twisting my moustache',
+  'Playing the trumpet',
+  'Traveling through space & time',
+]);
+
+export default @injectSheet(styles) @withTheme class AppLoader extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+  }
+
+  state = {
+    step: 0,
+  }
+
+  interval = null;
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState(prevState => ({
+        step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
+      }));
+    }, 2500);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { classes, theme } = this.props;
+    const { step } = this.state;
+
+    return (
+      <FullscreenLoader
+        title="Franz"
+        className={classes.component}
+        spinnerColor={theme.colorAppLoaderSpinner}
+      >
+        {textList.map((text, i) => (
+          <span
+            key={text}
+            className={classnames({
+              [`${classes.slogan}`]: true,
+              [`${classes.visible}`]: step === i,
+            })}
+          >
+            {text}
+          </span>
+        ))}
+      </FullscreenLoader>
+    );
+  }
+}
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
new file mode 100644
index 000000000..755a56b40
--- /dev/null
+++ b/src/components/ui/AppLoader/styles.js
@@ -0,0 +1,16 @@
+export default {
+  component: {
+    color: '#FFF',
+  },
+  slogan: {
+    display: 'block',
+    opacity: 0,
+    transition: 'opacity 1s ease',
+    position: 'absolute',
+    textAlign: 'center',
+    width: '100%',
+  },
+  visible: {
+    opacity: 1,
+  },
+};
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 309e05bb4..ffc7f7051 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -62,6 +62,8 @@ export default @observer class Button extends Component {
     }
 
     return (
+      // disabling rule as button has type defined in `buttonProps`
+      /* eslint-disable react/button-has-type */
       <button {...buttonProps}>
         <Loader
           loaded={loaded}
@@ -72,6 +74,7 @@ export default @observer class Button extends Component {
         />
         {label}
       </button>
+      /* eslint-enable react/button-has-type */
     );
   }
 }
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
new file mode 100644
index 000000000..6ecf4d395
--- /dev/null
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet, { withTheme } from 'react-jss';
+import classnames from 'classnames';
+
+import Loader from '../Loader';
+
+import styles from './styles';
+
+export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+    spinnerColor: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  static defaultProps = {
+    className: null,
+    spinnerColor: null,
+    children: null,
+  }
+
+  render() {
+    const {
+      classes,
+      title,
+      children,
+      spinnerColor,
+      className,
+      theme,
+    } = this.props;
+
+    return (
+      <div className={classes.wrapper}>
+        <div
+          className={classnames({
+            [`${classes.component}`]: true,
+            [`${className}`]: className,
+          })}
+        >
+          <h1 className={classes.title}>{title}</h1>
+          <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
+          {children && (
+            <div className={classes.content}>
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
new file mode 100644
index 000000000..64d24e4ce
--- /dev/null
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -0,0 +1,23 @@
+export default {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
+  component: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    height: 'auto',
+  },
+  title: {
+    fontSize: 35,
+  },
+  content: {
+    marginTop: 20,
+    width: '100%',
+  },
+};
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index 76f77d631..83a05554b 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
@@ -23,6 +23,8 @@ export default @observer class ImageUpload extends Component {
     path: null,
   }
 
+  dropzoneRef = null;
+
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
@@ -36,8 +38,6 @@ export default @observer class ImageUpload extends Component {
     field.set('');
   }
 
-  dropzoneRef = null;
-
   render() {
     const {
       field,
@@ -57,7 +57,7 @@ export default @observer class ImageUpload extends Component {
         <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label>
         <div className="image-upload">
           {(field.value && field.value !== 'delete') || this.state.path ? (
-            <div>
+            <Fragment>
               <div
                 className="image-upload__preview"
                 style={({
@@ -84,7 +84,7 @@ export default @observer class ImageUpload extends Component {
                 </button>
                 <div className="image-upload__action-background" />
               </div>
-            </div>
+            </Fragment>
           ) : (
             <Dropzone
               ref={(node) => { this.dropzoneRef = node; }}
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 94a1ddf76..612399e9f 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Loader from 'react-loader';
 
 // import { oneOrManyChildElements } from '../../prop-types';
-import Appear from '../ui/effects/Appear';
+import Appear from './effects/Appear';
 
 export default @observer class InfoBar extends Component {
   static propTypes = {
@@ -64,6 +64,7 @@ export default @observer class InfoBar extends Component {
           {children}
           {ctaLabel && (
             <button
+              type="button"
               className="info-bar__cta"
               onClick={onClick}
             >
@@ -80,6 +81,7 @@ export default @observer class InfoBar extends Component {
         </div>
         {!sticky && (
           <button
+            type="button"
             className="info-bar__close mdi mdi-close"
             onClick={onHide}
           />
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 77051f567..a33c6474a 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -61,6 +61,7 @@ export default @observer class Infobox extends Component {
           <button
             className="infobox__cta"
             onClick={ctaOnClick}
+            type="button"
           >
             <Loader
               loaded={!ctaLoading}
@@ -74,6 +75,7 @@ export default @observer class Infobox extends Component {
         )}
         {dismissable && (
           <button
+            type="button"
             onClick={() => this.setState({
               dismissed: true,
             })}
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 7bf6e1b00..9b070c4df 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -33,6 +33,8 @@ export default @observer class Input extends Component {
     passwordScore: 0,
   }
 
+  inputElement = null;
+
   componentDidMount() {
     if (this.props.focus) {
       this.focus();
@@ -53,8 +55,6 @@ export default @observer class Input extends Component {
     this.inputElement.focus();
   }
 
-  inputElement = null;
-
   render() {
     const {
       field,
@@ -110,7 +110,7 @@ export default @observer class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState({ showPassword: !this.state.showPassword })}
+              onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
               tabIndex="-1"
             />
           )}
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 0602290f1..b88686d5e 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -72,5 +72,4 @@ Link.wrappedComponent.defaultProps = {
   activeClassName: '',
   strictFilter: false,
   target: '',
-  openInBrowser: false,
 };
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 73984be94..67cd6af0b 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -73,4 +73,3 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
-
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 16c40d0ec..81d6666c6 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -5,6 +5,7 @@ export default theme => ({
     margin: [0, 0, 20, -20],
     padding: 20,
     'border-radius': theme.borderRadius,
+    pointerEvents: 'none',
   },
   titleContainer: {
     display: 'flex',
@@ -20,6 +21,7 @@ export default theme => ({
     'border-radius': theme.borderRadiusSmall,
     padding: [2, 4],
     'font-size': 12,
+    pointerEvents: 'initial',
   },
   content: {
     opacity: 0.5,
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index 63ca6f9b8..ba13aca63 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -18,6 +18,8 @@ export default @observer class Radio extends Component {
     showLabel: true,
   };
 
+  inputElement = null;
+
   componentDidMount() {
     if (this.props.focus) {
       this.focus();
@@ -28,8 +30,6 @@ export default @observer class Radio extends Component {
     this.inputElement.focus();
   }
 
-  inputElement = null;
-
   render() {
     const {
       field,
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 5a9571d27..78d6aae8b 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import uuidv1 from 'uuid/v1';
 import { debounce } from 'lodash';
 
 export default @observer class SearchInput extends Component {
@@ -22,7 +21,7 @@ export default @observer class SearchInput extends Component {
     value: '',
     placeholder: '',
     className: '',
-    name: uuidv1(),
+    name: 'searchInput',
     throttle: false,
     throttleDelay: 250,
     onChange: () => null,
@@ -30,6 +29,8 @@ export default @observer class SearchInput extends Component {
     autoFocus: false,
   }
 
+  input = null;
+
   constructor(props) {
     super(props);
 
@@ -74,8 +75,6 @@ export default @observer class SearchInput extends Component {
     onReset();
   }
 
-  input = null;
-
   render() {
     const { className, name, placeholder } = this.props;
     const { value } = this.state;
@@ -90,15 +89,17 @@ export default @observer class SearchInput extends Component {
         <label
           htmlFor={name}
           className="mdi mdi-magnify"
-        />
-        <input
-          name={name}
-          type="text"
-          placeholder={placeholder}
-          value={value}
-          onChange={e => this.onChange(e)}
-          ref={(ref) => { this.input = ref; }}
-        />
+        >
+          <input
+            name={name}
+            id={name}
+            type="text"
+            placeholder={placeholder}
+            value={value}
+            onChange={e => this.onChange(e)}
+            ref={(ref) => { this.input = ref; }}
+          />
+        </label>
         {value.length > 0 && (
           <span
             className="mdi mdi-close-circle-outline"
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index abcad417e..da52243ca 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -9,12 +9,13 @@ export default @observer class Select extends Component {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
     showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
   };
 
   static defaultProps = {
     className: null,
-    focus: false,
     showLabel: true,
+    disabled: false,
   };
 
   render() {
@@ -22,6 +23,7 @@ export default @observer class Select extends Component {
       field,
       className,
       showLabel,
+      disabled,
     } = this.props;
 
     return (
@@ -29,6 +31,7 @@ export default @observer class Select extends Component {
         className={classnames({
           'franz-form__field': true,
           'has-error': field.error,
+          'is-disabled': disabled,
           [`${className}`]: className,
         })}
       >
@@ -45,12 +48,13 @@ export default @observer class Select extends Component {
           id={field.id}
           defaultValue={field.value}
           className="franz-form__select"
+          disabled={field.disabled || disabled}
         >
           {field.options.map(type => (
             <option
               key={type.value}
               value={type.value}
-              // selected={field.value === }
+              disabled={type.disabled}
             >
               {type.label}
             </option>
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 4285a343c..6fc50fe5c 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-import Appear from '../ui/effects/Appear';
+import Appear from './effects/Appear';
 
 export default @observer class StatusBarTargetUrl extends Component {
   static propTypes = {
@@ -13,7 +13,6 @@ export default @observer class StatusBarTargetUrl extends Component {
 
   static defaultProps = {
     className: '',
-    position: 'bottom',
     text: '',
   };
 
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 9ff9f009e..16881a7f7 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
@@ -11,7 +11,7 @@ export default class TabItem extends Component {
     const { children } = this.props;
 
     return (
-      <div>{children}</div>
+      <Fragment>{children}</Fragment>
     );
   }
 }
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
new file mode 100644
index 000000000..3a3dbbe49
--- /dev/null
+++ b/src/components/ui/WebviewLoader/index.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+
+import FullscreenLoader from '../FullscreenLoader';
+
+import styles from './styles';
+
+export default @observer @injectSheet(styles) class WebviewLoader extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    classes: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { classes, name } = this.props;
+    return (
+      <FullscreenLoader
+        className={classes.component}
+        title={`Loading ${name}`}
+      />
+    );
+  }
+}
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js
new file mode 100644
index 000000000..dbd75db8a
--- /dev/null
+++ b/src/components/ui/WebviewLoader/styles.js
@@ -0,0 +1,9 @@
+export default theme => ({
+  component: {
+    background: theme.colorWebviewLoaderBackground,
+    padding: 20,
+    width: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+  },
+});
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
new file mode 100644
index 000000000..5db0db226
--- /dev/null
+++ b/src/components/util/ErrorBoundary/index.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+import styles from './styles';
+
+const messages = defineMessages({
+  headline: {
+    id: 'app.errorHandler.headline',
+    defaultMessage: '!!!Something went wrong.',
+  },
+  action: {
+    id: 'app.errorHandler.action',
+    defaultMessage: '!!!Reload',
+  },
+});
+
+export default @injectSheet(styles) class ErrorBoundary extends Component {
+  state = {
+    hasError: false,
+  }
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidCatch() {
+    this.setState({ hasError: true });
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { intl } = this.context;
+
+    if (this.state.hasError) {
+      return (
+        <div className={classes.component}>
+          <h1 className={classes.title}>
+            {intl.formatMessage(messages.headline)}
+          </h1>
+          <Button
+            label={intl.formatMessage(messages.action)}
+            buttonType="inverted"
+            onClick={() => window.location.reload()}
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js
new file mode 100644
index 000000000..0960546ff
--- /dev/null
+++ b/src/components/util/ErrorBoundary/styles.js
@@ -0,0 +1,13 @@
+export default theme => ({
+  component: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  title: {
+    fontSize: 20,
+    color: theme.colorText,
+  },
+});