#22: Remove hardcoded margins from Loader component

src/components/dev/apps/ApplicationsIndex.js

@@ -1,6 +1,7 @@
 // @flow
 import type { OauthAppResponse } from 'services/api/oauth';
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { LinkButton } from 'components/ui/form';
@@ -85,11 +86,7 @@ export default class ApplicationsIndex extends Component<Props> {
             resetClientId
         } = this.props;
 
-        if (displayForGuest) {
-            return <Guest />;
-        } else if (isLoading) {
-            return <Loader />;
-        } else if (applications.length > 0) {
+        if (applications.length > 0) {
             return (
                 <ApplicationsList
                     applications={applications}
@@ -99,16 +96,42 @@ export default class ApplicationsIndex extends Component<Props> {
                     resetClientId={resetClientId}
                 />
             );
+        } else if (displayForGuest) {
+            return <Guest />;
         }
 
-        return <NoApps />;
+        return <Loader noApps={!isLoading} />;
     }
 }
 
-function Loader() {
+function Loader({ noApps }: { noApps: bool }) {
     return (
-        <div className={styles.emptyState}>
-            <img src={loadingCubeIcon} className={styles.loadingStateIcon} />
+        <div className={styles.emptyState} data-e2e={noApps ? 'noApps' : 'loading'}>
+            <img
+                src={noApps ? cubeIcon : loadingCubeIcon}
+                className={styles.emptyStateIcon}
+            />
+
+            <div className={classNames(styles.noAppsContainer, {
+                [styles.noAppsAnimating]: noApps
+            })}>
+                <div className={styles.emptyStateText}>
+                    <div>
+                        <Message {...messages.youDontHaveAnyApplication} />
+                    </div>
+                    <div>
+                        <Message {...messages.shallWeStart} />
+                    </div>
+                </div>
+
+                <LinkButton
+                    to="/dev/applications/new"
+                    data-e2e="newApp"
+                    label={messages.addNew}
+                    color={COLOR_GREEN}
+                    className={styles.emptyStateActionButton}
+                />
+            </div>
         </div>
     );
 }
@@ -135,27 +158,3 @@ function Guest() {
         </div>
     );
 }
-
-function NoApps() {
-    return (
-        <div data-e2e="noApps" className={styles.emptyState}>
-            <img src={cubeIcon} className={styles.emptyStateIcon} />
-            <div className={styles.emptyStateText}>
-                <div>
-                    <Message {...messages.youDontHaveAnyApplication} />
-                </div>
-                <div>
-                    <Message {...messages.shallWeStart} />
-                </div>
-            </div>
-
-            <LinkButton
-                to="/dev/applications/new"
-                data-e2e="newApp"
-                label={messages.addNew}
-                color={COLOR_GREEN}
-                className={styles.emptyStateActionButton}
-            />
-        </div>
-    );
-}

src/components/dev/apps/applicationsIndex.scss

@@ -72,7 +72,16 @@
     font-size: 16px;
     margin-bottom: 20px;
     line-height: 20px;
+}
 
+.noAppsContainer {
+    visibility: hidden;
+}
+
+.noAppsAnimating {
+    visibility: visible;
+
+    .emptyStateText {
         > div {
             &:nth-child(1) {
                 @include emptyStateAnimation(0);
@@ -82,10 +91,11 @@
                 @include emptyStateAnimation(1);
             }
         }
-}
+    }
 
-.emptyStateActionButton {
+    .emptyStateActionButton {
         @include emptyStateAnimation(2);
+    }
 }
 
 @keyframes slide-in-bottom {
@@ -100,12 +110,6 @@
     }
 }
 
-.loadingStateIcon {
-    composes: emptyStateIcon;
-
-    margin-bottom: 130px; // TODO: this is needed to render empty state without height jumping. Maybe it can be done more dynamically?
-}
-
 .appsListTitleContainer {
     display: flex;
     align-items: center;