fix: don't break the page structure while loading data for the headerbar (#7)

* fix: don't break the page structure while loading data for the headerbar

* chore: conform to CSS classname convention

* chore: upgrade app-runtime to 1.2.0

Author: amcgee

package.json

@@ -42,7 +42,7 @@
         "@babel/plugin-transform-react-constant-elements": "^7.2.0",
         "@babel/preset-env": "^7.1.6",
         "@babel/preset-react": "^7.0.0",
-        "@dhis2/app-runtime": "1.1.0",
+        "@dhis2/app-runtime": "1.2.0",
         "@dhis2/cli-style": "3.1.1",
         "@dhis2/d2-i18n-extract": "1.0.7",
         "@dhis2/d2-i18n-generate": "1.1.1",

src/HeaderBar/Notifications.js

@@ -20,7 +20,6 @@ export const Notifications = ({ interpretations, messages }) => (
 
         <style jsx>{`
             div {
-                margin-left: auto;
                 user-select: none;
                 display: flex;
                 flex-direction: row;

src/HeaderBar/index.js

@@ -34,27 +34,35 @@ export const HeaderBar = ({ appName, className }) => {
         },
     })
 
-    if (loading) return <span>...</span>
-
     if (error) return <span>{`ERROR: ${error.message}`}</span>
 
-    const locale = data.user.settings.keyUiLocale || 'en'
-    i18n.changeLanguage(locale)
+    if (!loading) {
+        // TODO: This will run every render which is probably wrong!  Also, setting the global locale shouldn't be done in the headerbar
+        const locale = data.user.settings.keyUiLocale || 'en'
+        i18n.changeLanguage(locale)
+    }
 
     return (
         <header className={className}>
             <Logo />
 
-            <Title app={appName} instance={data.systemInfo.systemName} />
-
-            <Notifications
-                interpretations={data.notifications.unreadInterpretations}
-                messages={data.notifications.unreadMessageConversations}
-            />
-
-            <Apps apps={data.apps.modules} />
-
-            <Profile user={data.user} />
+            {!loading && (
+                <>
+                    <Title
+                        app={appName}
+                        instance={data.systemInfo.systemName}
+                    />
+                    <div className="right-control-spacer" />
+                    <Notifications
+                        interpretations={
+                            data.notifications.unreadInterpretations
+                        }
+                        messages={data.notifications.unreadMessageConversations}
+                    />
+                    <Apps apps={data.apps.modules} />
+                    <Profile user={data.user} />
+                </>
+            )}
 
             <style jsx>{`
                 header {
@@ -67,6 +75,9 @@ export const HeaderBar = ({ appName, className }) => {
                     border-bottom: 1px solid rgba(32, 32, 32, 0.15);
                     color: ${colors.white};
                 }
+                .right-control-spacer {
+                    margin-left: auto;
+                }
             `}</style>
         </header>
     )

stories/HeaderBar.stories.js

@@ -74,8 +74,14 @@ const customData = {
     },
 }
 
-storiesOf('HeaderBar', module).add('Default', () => (
-    <CustomDataProvider data={customData}>
-        <HeaderBar appName="Example!" />
-    </CustomDataProvider>
-))
+storiesOf('HeaderBar', module)
+    .add('Default', () => (
+        <CustomDataProvider data={customData}>
+            <HeaderBar appName="Example!" />
+        </CustomDataProvider>
+    ))
+    .add('Loading...', () => (
+        <CustomDataProvider options={{ loadForever: true }}>
+            <HeaderBar appName="Example!" />
+        </CustomDataProvider>
+    ))

yarn.lock

@@ -1441,10 +1441,10 @@
   dependencies:
     find-up "^2.1.0"
 
-"@dhis2/app-runtime@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-1.1.0.tgz#0b6256f7c61428ab62e7b2403338c2fbf6b28530"
-  integrity sha512-0fJ61KeHRF2FsGVoSdogUX1zCOCoFWa6jJdPJl6GPUo8IaR//Fv7PYQvTuSUMAIO61dOmnh1pAQ8ouf8Ip7lyw==
+"@dhis2/app-runtime@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-1.2.0.tgz#87e22d817a13d45a7d89d854e6152cfd959ec55d"
+  integrity sha512-2JOKPYIdNVpb6vVwuqmO+1ERelUdOYqFgWJDD2xnMNWYhNOPxvqi8v5rPLaOfTsUWeQ0RgBukPfRRJbBSqkipw==
 
 "@dhis2/cli-helpers-engine@^1.0.1":
   version "1.0.1"