feat(Posts): improve loading state

jkklapp · Jun 1, 2022 · 5e3ab61 · 5e3ab61
1 parent bd34266
commit 5e3ab61
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 35 deletions.
diff --git a/frontend/src/components/Dashboard/Posts.vue b/frontend/src/components/Dashboard/Posts.vue
@@ -6,8 +6,18 @@
         :key="p.id"
         class="bg-gray-200 dark:bg-gray-500 text-gray-800 dark:text-gray-100 px-4 pt-2 pb-2 mb-2 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg"
       >
-        <div>
-          <small>{{ p.userName }} - {{ date(p.date) }}</small>
+        <div class="flex flex-wrap">
+          <div>
+            <small>{{ p.userName }} - {{ date(p.date) }}</small>
+          </div>
+          <div v-if="!p.id && isPosting" class="w-100 ml-auto place-items-end">
+            <div class="lds-ring-small align-text-top">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
         </div>
         <div>
           <span>{{ p.message }}</span>
@@ -31,7 +41,8 @@
       </div>
     </div>
     <div v-if="isLoading" class="flex justify-center items-center">
-      <div class="lds-facebook">
+      <div class="lds-ring">
+        <div></div>
         <div></div>
         <div></div>
         <div></div>
@@ -50,6 +61,7 @@ export default {
       renderBackToTopButton: 'shouldRenderBackToTopButton',
       renderLoadMoreButton: 'shouldRenderLoadMoreButton',
       isLoading: 'isLoadingPosts',
+      isPosting: 'isCreatingPost',
     }),
   },
   methods: {

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -2,39 +2,74 @@
 @tailwind components;
 @tailwind utilities;
 
-.lds-facebook {
+.lds-ring {
   display: inline-block;
   position: relative;
   width: 80px;
   height: 80px;
 }
-.lds-facebook div {
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lds-ring-small {
   display: inline-block;
+  position: relative;
+  width: 10px;
+  height: 10px;
+}
+.lds-ring-small div {
+  box-sizing: border-box;
+  display: block;
   position: absolute;
-  left: 8px;
-  width: 16px;
-  background: #fff;
-  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  width: 8px;
+  height: 8px;
+  margin: 1px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring-small 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
 }
-.lds-facebook div:nth-child(1) {
-  left: 8px;
-  animation-delay: -0.24s;
+.lds-ring-small div:nth-child(1) {
+  animation-delay: -0.45s;
 }
-.lds-facebook div:nth-child(2) {
-  left: 32px;
-  animation-delay: -0.12s;
+.lds-ring-small div:nth-child(2) {
+  animation-delay: -0.3s;
 }
-.lds-facebook div:nth-child(3) {
-  left: 56px;
-  animation-delay: 0;
+.lds-ring-small div:nth-child(3) {
+  animation-delay: -0.15s;
 }
-@keyframes lds-facebook {
+@keyframes lds-ring-small {
   0% {
-    top: 8px;
-    height: 64px;
+    transform: rotate(0deg);
   }
-  50%, 100% {
-    top: 24px;
-    height: 32px;
+  100% {
+    transform: rotate(360deg);
   }
 }
diff --git a/frontend/src/store/actions/index.js b/frontend/src/store/actions/index.js
@@ -22,9 +22,12 @@ export default {
     commit('SET_START_AFTER', null);
   },
   async postMessage({ commit }, message) {
-    commit('IS_LOADING_POSTS', true);
-    const { data } = await apiRequest('POST', '/posts', null, { message });
-    commit('PUSH_MESSAGE', data);
-    commit('IS_LOADING_POSTS', false);
+    commit('IS_CREATING_POST', true);
+    commit('PUSH_MESSAGE', {
+      message,
+      date: new Date().getTime(),
+    });
+    await apiRequest('POST', '/posts', null, { message });
+    commit('IS_CREATING_POST', false);
   },
 };
diff --git a/frontend/src/store/actions/index.spec.js b/frontend/src/store/actions/index.spec.js
@@ -126,18 +126,21 @@ describe('actions', () => {
       testAction(
         actions.postMessage,
         'Hello World',
-        { posts: [] },
+        { posts: [], creatingPost: false },
         [
           {
-            type: 'IS_LOADING_POSTS',
+            type: 'IS_CREATING_POST',
             payload: true,
           },
           {
             type: 'PUSH_MESSAGE',
-            payload: POSTS_RESPONSE_FIXTURE[0],
+            payload: {
+              message: 'Hello World',
+              date: expect.anything(),
+            },
           },
           {
-            type: 'IS_LOADING_POSTS',
+            type: 'IS_CREATING_POST',
             payload: false,
           },
         ],

diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
@@ -17,4 +17,7 @@ export default {
   isLoadingPosts(state) {
     return state.loadingPosts;
   },
+  isCreatingPost(state) {
+    return state.creatingPost;
+  },
 };
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -12,6 +12,7 @@ const store = createStore({
     posts: [],
     message: null,
     loadingPosts: false,
+    creatingPost: false,
   },
   getters,
   mutations,

diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
@@ -9,12 +9,18 @@ export default {
     state.startAfter = data;
   },
   PUSH_MESSAGE(state, data) {
-    state.posts = [data, ...state.posts];
+    state.posts = [
+      { ...data, userName: state.user.displayName },
+      ...state.posts,
+    ];
   },
   SET_MESSAGE(state, data) {
     state.message = data;
   },
   IS_LOADING_POSTS(state, data) {
     state.loadingPosts = data;
   },
+  IS_CREATING_POST(state, data) {
+    state.creatingPost = data;
+  },
 };
diff --git a/frontend/src/store/mutations.spec.js b/frontend/src/store/mutations.spec.js
@@ -38,11 +38,11 @@ describe('mutations', () => {
         message: 'Hello World',
       };
       // mock state
-      const state = { posts: [] };
+      const state = { posts: [], user: { displayName: 'Test' } };
       // apply mutation
       PUSH_MESSAGE(state, messageFixture);
       // assert result
-      expect(state.posts).toEqual([messageFixture]);
+      expect(state.posts).toEqual([{ ...messageFixture, userName: 'Test' }]);
     });
   });
   describe('SET_MESSAGE', () => {