better placeholders and loading states

karlkeefer · Feb 26, 2023 · 0337a94 · 0337a94
1 parent 380abb8
commit 0337a94
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/react/src/Routes/Posts/Post.tsx b/react/src/Routes/Posts/Post.tsx
@@ -24,8 +24,8 @@ const ViewPost = () => {
   const { id, title, body } = post;
 
   return (
-    <SimplePage icon='file' title={title} loading={loading} error={error}>
-      <p>{body}</p>
+    <SimplePage icon='file alternate outline' title={title} loading={loading} error={error}>
+      <p style={{whiteSpace: 'pre'}}>{body}</p>
       {id && id > 0 && 
         <Button as={Link} to={`/post/${id}/edit`} content='Edit' />}
     </SimplePage>

diff --git a/react/src/Routes/Posts/PostForm.tsx b/react/src/Routes/Posts/PostForm.tsx
@@ -38,12 +38,10 @@ const PostForm = () => {
     })
   }, [run, postID, navigate])
 
-
-
   const { id, title, body } = fields;
 
   return (
-    <SimplePage icon='file alternate outline' title={id ? `Edit Post #${id}` : 'Create a Post'}>
+    <SimplePage icon='file alternate outline' title={postID ? `Edit Post #${postID}` : 'Create a Post'}>
       <Form error name="createPost" loading={loading} onSubmit={handleSubmit}>
         <Message error>{error}</Message>
         <Form.Input

diff --git a/react/src/Routes/Posts/Posts.tsx b/react/src/Routes/Posts/Posts.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react'
 
 import { Link } from 'react-router-dom'
-import { Segment, Message, Header, Button, Placeholder } from 'semantic-ui-react'
+import { Segment, Message, Header, Button, Placeholder, SegmentGroup, PlaceholderHeader } from 'semantic-ui-react'
 
 import API from 'Api'
 import { useRequest } from 'Shared/Hooks'
@@ -18,17 +18,9 @@ const Posts = () => {
   }, [run])
 
   return (
-    <SimplePage icon='copy' title='My Posts' error={error}>
+    <SimplePage icon='copy outline' title='My Posts' error={error}>
       <p>This page fetches some protected data that only the logged in user ({user.email}) can see!</p>
-      {loading &&
-        <Placeholder style={{ marginBottom: '1em' }}>
-          <Placeholder.Paragraph>
-            <Placeholder.Line />
-            <Placeholder.Line />
-            <Placeholder.Line />
-            <Placeholder.Line />
-          </Placeholder.Paragraph>
-        </Placeholder>}
+      {loading && <PostsPlaceholder/>}
       {posts.length === 0 && !loading && 
         <Message warning>No posts found...</Message>}
       {posts.map(SinglePost)}
@@ -39,6 +31,26 @@ const Posts = () => {
 
 export default Posts;
 
+const PostsPlaceholder = () => (
+  <SegmentGroup style={{ marginBottom: '1em' }}>
+    <Segment attached='bottom'>
+      <Placeholder>
+        <Placeholder.Header>
+          <Placeholder.Line/>
+        </Placeholder.Header>
+      </Placeholder>
+    </Segment>
+    <Segment attached='top'>
+      <Placeholder>
+        <Placeholder.Paragraph>
+          <Placeholder.Line />
+          <Placeholder.Line />
+        </Placeholder.Paragraph>
+      </Placeholder>
+    </Segment>
+  </SegmentGroup>
+)
+
 const SinglePost = ({ id, title, body }: Post) => (
   <Segment.Group key={id}>
     <Header attached='top' as='h3'>

diff --git a/react/src/Shared/SimplePage.tsx b/react/src/Shared/SimplePage.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 
 import { Helmet } from 'react-helmet'
-import { Container, Grid, Header, Icon, Message, Loader, SemanticICONS } from 'semantic-ui-react'
+import { Container, Grid, Header, Icon, Message, SemanticICONS, Placeholder } from 'semantic-ui-react'
 
 type SimplePageProps = React.PropsWithChildren<{
   title: string
@@ -20,18 +20,38 @@ const SimplePage = ({ title, icon, centered, loading, error, children }: SimpleP
 
     <Content centered={!!centered}>
       <Header as='h1'>
-        {icon && <Icon name={icon} />}{title}
+        {icon && <Icon name={icon} />}{loading ? <PlaceholderTitle/> : title}
       </Header>
 
       {error && <Message negative>{error}</Message>}
 
-      {loading ? <Loader active inline='centered' /> : children}
+      {loading ? <PlaceholderPost/> : children}
     </Content>
   </Container>
 );
 
 export default SimplePage;
 
+const PlaceholderTitle = () => (
+  <div style={{display:'table-cell', width: '10em', paddingTop: '0.4em', paddingLeft: '0.5em'}}>
+    <Placeholder>
+      <Placeholder.Header>
+        <Placeholder.Line/>
+      </Placeholder.Header>
+    </Placeholder>
+  </div>
+)
+
+const PlaceholderPost = () => (
+  <Placeholder>
+    <Placeholder.Paragraph>
+      <Placeholder.Line/>
+      <Placeholder.Line/>
+      <Placeholder.Line/>
+    </Placeholder.Paragraph>
+  </Placeholder>
+)
+
 type ContentProps = {
   children: ReactNode;
   centered: boolean