blacklist

package.json

@@ -10,8 +10,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
-    "react-test-renderer": "^16.13.1",
-    "use-reducer-with-local-storage": "^1.1.1"
+    "react-test-renderer": "^16.13.1"
   },
   "scripts": {
     "build": "react-scripts build",

src/App.js

@@ -1,56 +1,76 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import useReducerWithLocalStorage from 'use-reducer-with-local-storage';
-import reducer, { emptyState } from './store/reducer';
+import reducer, {
+  emptyState,
+  LOADING,
+  READY,
+  SET_STATUS
+} from './store/reducer';
 import './App.css';
 import makeHandleOnChange from './makeHandleOnChange';
 
 function App() {
-  const [{ bio, name, url }, dispatch] = useReducerWithLocalStorage({
+  const [{ bio, name, status, url }, dispatch] = useReducerWithLocalStorage({
+    blacklist: ['status'],
     initializerArg: emptyState,
     key: 'REACT_APP_STATE',
     reducer
   });
 
   const handleOnChange = makeHandleOnChange({ dispatch });
 
+  useEffect(() => {
+    if (status === LOADING) {
+      setTimeout(() => {
+        dispatch({ type: SET_STATUS, value: READY });
+      }, 3000);
+    }
+  }, [dispatch, status]);
+
   return (
     <div className="App">
-      <h1 className="App__h1">Public profile</h1>
-      <form className="App__form">
-        <input
-          className="App__input"
-          name="name"
-          onChange={handleOnChange}
-          placeholder="Name"
-          type="text"
-          value={name}
-        />
-        <textarea
-          className="App__textarea"
-          cols="40"
-          name="bio"
-          onChange={handleOnChange}
-          placeholder="Bio"
-          rows="10"
-          value={bio}
-        />
-        <input
-          className="App__input"
-          name="url"
-          onChange={handleOnChange}
-          placeholder="URL"
-          type="text"
-          value={url}
-        />
-        <button
-          className="App__button"
-          name="clear"
-          onClick={handleOnChange}
-          type="button"
-        >
-          Clear
-        </button>
-      </form>
+      {status === LOADING ? (
+        <h1 className="App__h1">Loading ...</h1>
+      ) : (
+        <>
+          <h1 className="App__h1">Public profile</h1>
+          <form className="App__form">
+            <input
+              className="App__input"
+              name="name"
+              onChange={handleOnChange}
+              placeholder="Name"
+              type="text"
+              value={name}
+            />
+            <textarea
+              className="App__textarea"
+              cols="40"
+              name="bio"
+              onChange={handleOnChange}
+              placeholder="Bio"
+              rows="10"
+              value={bio}
+            />
+            <input
+              className="App__input"
+              name="url"
+              onChange={handleOnChange}
+              placeholder="URL"
+              type="text"
+              value={url}
+            />
+            <button
+              className="App__button"
+              name="clear"
+              onClick={handleOnChange}
+              type="button"
+            >
+              Clear
+            </button>
+          </form>
+        </>
+      )}
     </div>
   );
 }

src/store/reducer.js

@@ -2,8 +2,11 @@ export const CHANGE_BIO = 'CHANGE_BIO';
 export const CHANGE_NAME = 'CHANGE_NAME';
 export const CHANGE_URL = 'CHANGE_URL';
 export const CLEAR_ALL = 'CLEAR_ALL';
+export const LOADING = 'LOADING';
+export const READY = 'READY';
+export const SET_STATUS = 'SET_STATUS';
 
-export const emptyState = { bio: '', name: '', url: '' };
+export const emptyState = { bio: '', name: '', status: LOADING, url: '' };
 
 function reducer(state, action) {
   switch (action.type) {
@@ -15,6 +18,8 @@ function reducer(state, action) {
       return { ...state, url: action.value };
     case CLEAR_ALL:
       return { ...emptyState };
+    case SET_STATUS:
+      return { ...state, status: action.value };
     default:
       return state;
   }