client: Improve placeholder positioning

Sketch-sh · Aug 19, 2018 · 4c7fafe · 4c7fafe
1 parent ccec690
commit 4c7fafe
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/client/src/App.re b/client/src/App.re
@@ -64,7 +64,7 @@ let make = _children => {
                      {| import(/* webpackChunkName: "Note" */ "./Note.bs.js") |}
                    ]
                  )
-                 onLoading=(() => <Editor_NotePlaceholder />)
+                 onLoading=(() => <UI_FullpageLoading />)
                  render=(((module Note)) => <Note noteInfo />)
                />
           </Layout_WithTopbar>

diff --git a/client/src/Note.re b/client/src/Note.re
@@ -59,9 +59,8 @@ let make = (~noteInfo: Route.noteRouteConfig, _children) => {
       ...(
            ({result}) =>
              switch (result) {
-             | Loading => <UI_FullpageLoading />
-             | Error(error) =>
-               <div> (ReasonReact.string(error##message)) </div>
+             | Loading => <Editor_NotePlaceholder />
+             | Error(error) => error##message->str
              | Data(response) =>
                let notes = response##note;
                notes

diff --git a/client/src/User.re b/client/src/User.re
@@ -30,7 +30,10 @@ let make = (~userName, _children) => {
         ...(
              ({result}) =>
                switch (result) {
-               | Loading => <UI_SketchList.Placeholder />
+               | Loading =>
+                 <div style=(ReactDOMRe.Style.make(~width="500px", ()))>
+                   <UI_SketchList.Placeholder />
+                 </div>
                | Error(error) => error##message->str
                | Data(response) =>
                  <UI_SketchList

diff --git a/client/src/components/UI_SketchList.re b/client/src/components/UI_SketchList.re
@@ -94,10 +94,10 @@ module WithUserInfo = {
 module Placeholder = {
   let component = ReasonReact.statelessComponent("UI_SketchList.Placeholder");
 
-  let make = (~className=?, _children) => {
+  let make = (~className=?, ~width=450, _children) => {
     ...component,
     render: _self =>
-      <ReactContentLoader ?className height=250 width=450>
+      <ReactContentLoader ?className height=250 width>
         <rect x="0" y="0" rx="0" ry="0" width="93" height="20" />
         <rect x="110" y="0" rx="0" ry="0" width="195" height="20" />
         <rect x="30" y="30" rx="0" ry="0" width="130" height="14" />

diff --git a/client/src_editor/Editor_NotePlaceholder.re b/client/src_editor/Editor_NotePlaceholder.re
@@ -3,11 +3,11 @@ let component = ReasonReact.statelessComponent("Editor_NotePlaceholder");
 let make = _children => {
   ...component,
   render: _self =>
-    <div className="EditorNote Layout__center">
+    <div className="Layout__center">
       <div style=(ReactDOMRe.Style.make(~marginLeft="30px", ()))>
         <div style=(ReactDOMRe.Style.make(~marginBottom="32px", ()))>
           <ReactContentLoader width=800 height=100>
-            <rect rx="4" ry="4" width="800" height="30" />
+            <rect rx="4" ry="4" width="600" height="30" />
             <circle cx="16" cy="50" r="16" />
             <rect x="38" y="42" rx="4" ry="4" width="300" height="16" />
             <rect x="350" y="42" rx="4" ry="4" width="200" height="16" />