diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 38dea9f..319bc1c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,15 +2,12 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="729520b8-d983-481a-8a84-8506637bf89b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/service/UserService.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/user-loader/UserLoader.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/chat/Chat.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/chat/Chat.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/chat/StateMachine.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/chat/StateMachine.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/model/Model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/Model.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/starred-messages/StarredMessages.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/starred-messages/StarredMessages.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/starred-messages/StateMachine.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/starred-messages/StateMachine.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/service/UserService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/service/UserService.ts" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -21,8 +18,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="TypeScript JSX File" />
         <option value="TypeScript File" />
+        <option value="TypeScript JSX File" />
       </list>
     </option>
   </component>
diff --git a/package-lock.json b/package-lock.json
index 786dc82..efb997e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1641,6 +1641,11 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
       "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ=="
     },
+    "@types/lru-cache": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-5.1.0.tgz",
+      "integrity": "sha512-RaE0B+14ToE4l6UqdarKPnXwVDuigfFv+5j9Dze/Nqr23yyuqdNvzcZi3xB+3Agvi5R4EOgAksfv3lXX4vBt9w=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
diff --git a/package.json b/package.json
index 52fe9e0..bea9d18 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@types/axios-cancel": "^0.2.0",
     "@types/jest": "^24.0.25",
     "@types/lodash": "^4.14.149",
+    "@types/lru-cache": "^5.1.0",
     "@types/node": "^12.12.22",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
@@ -23,6 +24,7 @@
     "clsx": "^1.0.4",
     "immutable": "^4.0.0-rc.12",
     "lodash": "^4.17.15",
+    "lru-cache": "^5.1.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0",
diff --git a/src/App.tsx b/src/App.tsx
index a0748e2..4413a95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import {Chat} from "./chat/Chat";
 import {StarredMessages} from "./starred-messages/StarredMessages";
 import {Grid} from "@material-ui/core";
 import {useUrlSearchParams} from "use-url-search-params";
+import {UserLoader} from "./user-loader/UserLoader";
 
 function randUser() {
     return Math.round(Math.random() * 2);
@@ -14,13 +15,16 @@ function App() {
     const userId: number = Number(user.userId);
     return (
         <div>
-            <Grid container spacing={3}>
-                <Grid item xs={6}>
-                    <Chat me={userId}/>
-                </Grid>
-                <Grid item xs={6}>
-                    <StarredMessages me={userId}/>
-                </Grid>
+            {/*<Grid container spacing={3}>*/}
+            {/*    <Grid item xs={6}>*/}
+            {/*        <Chat me={userId}/>*/}
+            {/*    </Grid>*/}
+            {/*    <Grid item xs={6}>*/}
+            {/*        <StarredMessages me={userId}/>*/}
+            {/*    </Grid>*/}
+            {/*</Grid>*/}
+            <Grid>
+                <UserLoader />
             </Grid>
         </div>
     )
diff --git a/src/service/UserService.ts b/src/service/UserService.ts
index 4112b9b..3bddb37 100644
--- a/src/service/UserService.ts
+++ b/src/service/UserService.ts
@@ -1,8 +1,14 @@
 import {User, UserId} from "../model/Model";
 import Axios from "axios-observable";
-import {map, publishReplay, refCount, retry, share} from "rxjs/operators";
-import {Observable} from "rxjs";
+import {map, publishReplay, refCount, retry, share, tap} from "rxjs/operators";
+import {Observable, of} from "rxjs";
 import {unsupported} from "../Common";
+import LRU from "lru-cache";
+
+interface ValueAndRequest<Value> {
+    value?: Value
+    request: Observable<Value>
+}
 
 interface UserService {
     getUserWithId: (id: UserId) => Observable<User>
@@ -10,25 +16,41 @@ interface UserService {
 
 class UserServiceImpl implements UserService {
 
-    private readonly baseUrl = "http://localhost:5000/";
-    private readonly userRequests: Map<UserId, Observable<User>> = new Map();
+    private static readonly baseUrl = "http://localhost:5000/";
+    private static readonly cacheOptions = {
+        max: 100,
+        maxAge: 1000 * 60 * 60
+    };
+
+    private readonly userCache = new LRU<UserId, ValueAndRequest<User>>(UserServiceImpl.cacheOptions);
 
     getUserWithId(id: UserId): Observable<User> {
 
-        if(this.userRequests.has(id))
-            return this.userRequests.get(id) ?? unsupported("Can't happen!");
+        const valueAndRequest = this.userCache.get(id);
+        if(valueAndRequest && valueAndRequest.value) return of(valueAndRequest.value);
+        if(valueAndRequest) return valueAndRequest.request;
 
         const path = `users/?userId=${id}`;
         const userRequest = Axios
-            .get(this.baseUrl + path)
+            .get(UserServiceImpl.baseUrl + path)
             .pipe(
                 map(response => response.data),
+                tap(user => this.cacheUser(id, user)),
                 publishReplay(1),
                 refCount()
             );
-        this.userRequests.set(id, userRequest);
+        this.userCache.set(id, {
+           request: userRequest
+        });
         return userRequest;
     }
+
+    private cacheUser(id: UserId, user: User) {
+        const valueAndRequest = this.userCache.get(id);
+        if(!valueAndRequest) unsupported("There must be a request cached at this point!");
+        if(valueAndRequest.value) unsupported("Value must be undefined at this point!");
+        valueAndRequest.value = user;
+    }
 }
 
 export default new UserServiceImpl();
diff --git a/src/user-loader/UserLoader.tsx b/src/user-loader/UserLoader.tsx
new file mode 100644
index 0000000..8cf2272
--- /dev/null
+++ b/src/user-loader/UserLoader.tsx
@@ -0,0 +1,80 @@
+import React, {Dispatch, Reducer, useReducer} from "react";
+import {User} from "../model/Model";
+import {feedbackFactory, noop, unsupported} from "../Common";
+import userService from "../service/UserService";
+import Container from "@material-ui/core/Container";
+import {TableContainer} from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+
+const randomUserIds = Array.from({length: 30}, () => Math.floor(Math.random() * 5));
+
+interface State {
+    users: Array<User>
+}
+
+const initialState: State = {
+    users: randomUserIds.map(id => ({id, name: "-"}))
+};
+
+export const UserLoader: React.FC = () => {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    useFeedbacks(state, dispatch);
+    return (
+        <Container fixed maxWidth="sm">
+            <TableContainer component={Paper}>
+                <Table aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>User Id</TableCell>
+                            <TableCell>User name</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {state.users.map(u => (
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {u.id}
+                                </TableCell>
+                                <TableCell component="th" scope="row">
+                                    {u.name}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </Container>
+    );
+};
+
+
+type Action = { user: User }
+
+const reducer: Reducer<State, Action> = (state, action) => {
+    const index = state.users.findIndex(u => u.id === action.user.id && u.name ==="-");
+    if (index === -1) unsupported("The user must be in the array!");
+    state.users[index] = action.user;
+    return {users: state.users};
+};
+
+const useFeedbacks = (state: State, dispatch: Dispatch<Action>) => {
+    const useFeedback = feedbackFactory(state);
+    useFeedback(
+        s => s.users.map(u => u.id),
+        ids => {
+            ids.forEach(id => {
+                setTimeout(_ => {
+                    userService
+                        .getUserWithId(id)
+                        .subscribe(user => dispatch({user}))
+                }, Math.random() * 10000);
+            });
+            return noop;
+        }
+    )
+};