Skip to content
This repository was archived by the owner on Jun 16, 2023. It is now read-only.

Commit f669cde

Browse files
bsrinivas8687ironman0x7b2adwaitraste
authored
Added the application loading screen (#9)
* Added loading page to index.html without a progress bar * Loading screen using Redux * Refactoring * Changed made according to instructions Co-authored-by: Tony Stark <[email protected]> Co-authored-by: Adwait Raste <[email protected]> Co-authored-by: Adwait Raste <[email protected]>
1 parent a9f69cd commit f669cde

File tree

13 files changed

+282
-43
lines changed

13 files changed

+282
-43
lines changed

‎.github/workflows/lint.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@ jobs:
1616
run: yarn install
1717

1818
- name: Run ESLint
19-
run: ./node_modules/eslint/bin/eslint.js --ext .js,.jsx .
19+
run: ./node_modules/eslint/bin/eslint.js .

‎package.json

+8-3
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,21 @@
1919
"eject": "react-scripts eject"
2020
},
2121
"devDependencies": {
22-
"eslint": "^7.10.0",
22+
"eslint": "^7.11.0",
2323
"eslint-config-standard": "^14.1.1",
2424
"eslint-plugin-import": "^2.22.1",
2525
"eslint-plugin-node": "^11.1.0",
2626
"eslint-plugin-promise": "^4.2.1",
27-
"eslint-plugin-react": "^7.21.3",
27+
"eslint-plugin-react": "^7.21.4",
2828
"eslint-plugin-standard": "^4.0.1",
29+
"prop-types": "^15.7.2",
2930
"react": "^16.13.1",
3031
"react-dom": "^16.13.1",
31-
"react-scripts": "^3.4.3"
32+
"react-redux": "^7.2.1",
33+
"react-scripts": "^3.4.3",
34+
"redux": "^4.0.5",
35+
"redux-devtools-extension": "^2.13.8",
36+
"redux-thunk": "^2.3.0"
3237
},
3338
"browserslist": {
3439
"production": [

‎public/Sentinel_Full.svg

+22
Loading

‎public/index.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
html, body, .loader-container, .loader {
2+
height: 100%;
3+
}
4+
5+
#logo {
6+
margin: 0 auto;
7+
display: block;
8+
height: 8%;
9+
}
10+
11+
.loader-container {
12+
background-color: #142D51;
13+
}
14+
15+
.loader {
16+
height: 100%;
17+
display: flex;
18+
align-items: center;
19+
}
20+
21+
.bottom-text {
22+
position: absolute;
23+
bottom: 5%;
24+
text-align: center;
25+
width: 100%;
26+
color: #808080;
27+
font-size: 16px;
28+
}

‎public/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8"/>
56
<meta content="width=device-width, initial-scale=1" name="viewport"/>
@@ -8,12 +9,23 @@
89
<link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
910
<link href="%PUBLIC_URL%/favicon.ico" rel="icon"/>
1011
<link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/>
12+
<link href="%PUBLIC_URL%/index.css" rel="stylesheet"/>
1113
<title>Sentinel</title>
1214
</head>
1315

1416
<body>
1517
<noscript>You need to enable JavaScript to run this app.</noscript>
1618
<div id="root"></div>
19+
<div class="loader-container">
20+
<div class="loader">
21+
<object data="%PUBLIC_URL%/Sentinel_Full.svg" id="logo" type="image/svg+xml">
22+
SENTINEL
23+
</object>
24+
</div>
25+
<div class="bottom-text">
26+
PREPARING THE SENTINEL CLIENT
27+
</div>
28+
</div>
1729
</body>
1830

1931
</html>

‎src/App.js

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import React from 'react';
21
import './App.css';
2+
import Application from './containers/Application';
33

4-
const App = () => {
5-
return (
6-
<div className="App">
7-
</div>
8-
);
9-
};
10-
11-
export default App;
4+
export default Application;

‎src/actions/application.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
APPLICATION_LOADING_ERROR,
3+
APPLICATION_LOADING_IN_PROGRESS,
4+
APPLICATION_LOADING_SUCCESS,
5+
} from '../constants/application';
6+
7+
export const loadingError = () => {
8+
return {
9+
type: APPLICATION_LOADING_ERROR,
10+
};
11+
};
12+
13+
export const loadingInProgress = () => {
14+
return {
15+
type: APPLICATION_LOADING_IN_PROGRESS,
16+
};
17+
};
18+
19+
export const loadingSuccess = () => {
20+
return {
21+
type: APPLICATION_LOADING_SUCCESS,
22+
};
23+
};
24+
25+
export const load = () => (dispatch) => {
26+
dispatch(loadingInProgress());
27+
28+
try {
29+
const loader = document.querySelector('.loader-container');
30+
if (loader) {
31+
loader.remove();
32+
}
33+
} catch (e) {
34+
console.error(e);
35+
dispatch(loadingError());
36+
}
37+
38+
dispatch(loadingSuccess());
39+
};

‎src/constants/application.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const APPLICATION_LOADING_ERROR = 'APPLICATION_LOADING_ERROR';
2+
export const APPLICATION_LOADING_SUCCESS = 'APPLICATION_LOADING_SUCCESS';
3+
export const APPLICATION_LOADING_IN_PROGRESS = 'APPLICATION_LOADING_IN_PROGRESS';

‎src/containers/Application/index.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as PropTypes from 'prop-types';
2+
import React from 'react';
3+
import { connect } from 'react-redux';
4+
import { load } from '../../actions/application';
5+
6+
class Application extends React.Component {
7+
componentDidMount () {
8+
this.props.load();
9+
}
10+
11+
render () {
12+
if (this.props.isLoading) {
13+
return null;
14+
}
15+
16+
return (
17+
<div className="App">
18+
MyApp
19+
</div>
20+
);
21+
}
22+
}
23+
24+
Application.propTypes = {
25+
isLoading: PropTypes.bool.isRequired,
26+
load: PropTypes.func.isRequired,
27+
};
28+
29+
const stateToProps = (state) => {
30+
return {
31+
isLoading: state.application.isLoading,
32+
};
33+
};
34+
35+
const actionsToProps = {
36+
load,
37+
};
38+
39+
export default connect(stateToProps, actionsToProps)(Application);

‎src/index.js

+21-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
3+
import { Provider } from 'react-redux';
4+
import { applyMiddleware, createStore } from 'redux';
5+
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
6+
import thunk from 'redux-thunk';
47
import App from './App';
8+
import './index.css';
9+
import rootReducer from './reducers';
510
import * as serviceWorker from './serviceWorker';
611

12+
const store = createStore(
13+
rootReducer,
14+
composeWithDevTools(
15+
applyMiddleware(
16+
thunk,
17+
),
18+
),
19+
);
20+
721
ReactDOM.render(
8-
<React.StrictMode>
9-
<App/>
10-
</React.StrictMode>,
22+
<Provider store={store}>
23+
<React.StrictMode>
24+
<App/>
25+
</React.StrictMode>
26+
</Provider>,
1127
document.getElementById('root'),
1228
);
1329

14-
serviceWorker.register();
30+
serviceWorker.unregister();

‎src/reducers/application.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { combineReducers } from 'redux';
2+
import {
3+
APPLICATION_LOADING_ERROR,
4+
APPLICATION_LOADING_IN_PROGRESS,
5+
APPLICATION_LOADING_SUCCESS,
6+
} from '../constants/application';
7+
8+
const isLoading = (state = false, action) => {
9+
switch (action.type) {
10+
case APPLICATION_LOADING_IN_PROGRESS:
11+
return true;
12+
case APPLICATION_LOADING_ERROR:
13+
case APPLICATION_LOADING_SUCCESS:
14+
return false;
15+
default:
16+
return state;
17+
}
18+
};
19+
20+
export default combineReducers({
21+
isLoading,
22+
});

‎src/reducers/index.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { combineReducers } from 'redux';
2+
import application from './application';
3+
4+
export default combineReducers({
5+
application,
6+
});

0 commit comments

Comments
 (0)