fix(layout): fix loading... position

packages/component-faraday-ui/src/gridItems/Row.js

@@ -11,7 +11,7 @@ export default styled.div.attrs({
   background-color: ${props => props.bgColor || 'transparent'};
   display: flex;
   flex-wrap: ${props => props.flexWrap || 'initial'};
-  flex-direction: row;
+  flex-direction: ${props => props.flexDirection || 'row'};
   justify-content: ${({ justify }) => justify || 'space-evenly'};
   height: ${props => get(props, 'height', 'auto')};
 

packages/components-faraday/src/components/Dashboard/DashboardItems.js

@@ -19,14 +19,14 @@ const DashboardItems = ({ onClick, list, deleteProject }) => (
       </Row>
     ) : (
       list.map(collection => (
-        // <HideLoading>
-        <DashboardItem
-          collection={collection}
-          key={collection.id}
-          onClick={onClick}
-          onDelete={() => deleteProject(collection)}
-        />
-        // </HideLoading>
+        <HideLoading key={collection.id}>
+          <DashboardItem
+            collection={collection}
+            key={collection.id}
+            onClick={onClick}
+            onDelete={() => deleteProject(collection)}
+          />
+        </HideLoading>
       ))
     )}
   </Root>
@@ -64,12 +64,17 @@ const Root = styled.div`
     width: auto;
   }
 `
-// const HideLoading = styled.div`
-//   > div {
-//     display: none;
-//   }
-//   > div[data-test-id|='fragment'] {
-//     display: flex;
-//   }
-// `
+const HideLoading = styled.div`
+  > div {
+    display: none;
+  }
+
+  &:first-of-type > div {
+    display: flex;
+  }
+
+  > div[data-test-id|='fragment'] {
+    display: flex;
+  }
+`
 // #endregion

packages/xpub-faraday/app/FaradayApp.js

@@ -91,11 +91,11 @@ const Root = styled.div`
 const appBarPaddingHelper = props =>
   props.canCreateDraft
     ? css`
-        padding: calc(${th('appBar.height')}) calc(${th('gridUnit')} * 12)
-          calc(${th('gridUnit')} * 2);
+        padding: calc(${th('appBar.height')} + ${th('gridUnit')})
+          calc(${th('gridUnit')} * 12) calc(${th('gridUnit')} * 2);
       `
     : css`
-        padding: calc(${th('appBar.height')} + ${th('gridUnit')} * 2.5)
+        padding: calc(${th('appBar.height')} + ${th('gridUnit')} * 4)
           calc(${th('gridUnit')} * 12) calc(${th('gridUnit')} * 2);
       `