Added proper loading status handling to short URLs list

src/short-urls/ShortUrls.js

@@ -16,5 +16,6 @@ export function ShortUrls(props) {
 }
 
 export default connect(state => ({
-  shortUrlsList: state.shortUrlsList
+  shortUrlsList: state.shortUrlsList.shortUrls,
+  loading: state.shortUrlsList.loading,
 }))(ShortUrls);

src/short-urls/ShortUrlsList.js

@@ -43,11 +43,15 @@ export class ShortUrlsList extends React.Component {
   }
 
   renderShortUrls() {
-    const { shortUrlsList, selectedServer } = this.props;
-    if (isEmpty(shortUrlsList)) {
+    const { shortUrlsList, selectedServer, loading } = this.props;
+    if (loading) {
       return <tr><td colSpan="6" className="text-center">Loading...</td></tr>;
     }
 
+    if (! loading && isEmpty(shortUrlsList)) {
+      return <tr><td colSpan="6" className="text-center">No results found</td></tr>;
+    }
+
     return shortUrlsList.map(shortUrl => (
       <Row shortUrl={shortUrl} selectedServer={selectedServer} key={shortUrl.shortCode} />
     ));
@@ -69,8 +73,9 @@ class Row extends React.Component {
     const { shortUrl, selectedServer } = this.props;
 
     return (
-      <tr onMouseEnter={() => this.setState({ displayMenu: true })}
-          onMouseLeave={() => this.setState({ displayMenu: false })}
+      <tr
+        onMouseEnter={() => this.setState({ displayMenu: true })}
+        onMouseLeave={() => this.setState({ displayMenu: false })}
       >
         <td className="nowrap short-urls-list__cell">
           <Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>

src/short-urls/reducers/shortUrlsList.js

@@ -1,14 +1,25 @@
 import ServersService from '../../servers/services';
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 
+export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
 export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
 export const UPDATE_SHORT_URLS_LIST = 'shlink/shortUrlsList/UPDATE_SHORT_URLS_LIST';
 
-export default function reducer(state = [], action) {
+const initialState = {
+  shortUrls: [],
+  loading: true,
+};
+
+export default function reducer(state = initialState, action) {
   switch (action.type) {
+    case LIST_SHORT_URLS_START:
+      return { ...state, loading: true };
     case LIST_SHORT_URLS:
     case UPDATE_SHORT_URLS_LIST:
-      return action.shortUrls;
+      return {
+        loading: false,
+        shortUrls: action.shortUrls
+      };
     default:
       return state;
   }
@@ -26,7 +37,7 @@ export const listShortUrls = (serverId, params = {}) => {
 
 export const updateShortUrlsList = (params = {}) => {
   return async dispatch => {
-
+    dispatch({ type: LIST_SHORT_URLS_START });
 
     const shortUrls = await ShlinkApiClient.listShortUrls(params);
     dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params });