Skip to content

Commit 12ec8e1

Browse files
author
Robb Satterwhite
committed
Change loading screen.
1 parent 1788ce6 commit 12ec8e1

File tree

9 files changed

+153
-12
lines changed

9 files changed

+153
-12
lines changed

‎details.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ By default, the app keeps track of the last list used, and it initially shows th
4747

4848
## Roadmap
4949

50-
- authenticate w/ third party service
50+
- authentication functions (reset password, etc.)
5151
- copy a list
5252
- show recently completed items (for xx days)
5353
- streamline handling for connectivity issues

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@auth0/auth0-react": "^1.6.0",
67
"@dnd-kit/core": "^3.0.2",
78
"@dnd-kit/modifiers": "^2.1.0",
89
"@dnd-kit/sortable": "^3.0.1",
@@ -12,6 +13,8 @@
1213
"@testing-library/react": "^11.1.0",
1314
"@testing-library/user-event": "^12.1.10",
1415
"axios": "^0.21.1",
16+
"css-spinners": "^1.0.1",
17+
"css-spinners-react": "^1.0.2",
1518
"formik": "^2.2.9",
1619
"react": "^17.0.2",
1720
"react-device-detect": "^1.17.0",

‎src/App.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
display: flex;
44
flex-direction: column;
55
align-items: center;
6+
justify-content: flex-start;
67
}
78

89
.App-logo {

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Help from './components/Help';
1111
import Registration from './components/Registration';
1212
import NotFound from './components/NotFound';
1313
import Settings from './components/Settings';
14+
import Loading from './components/Loading';
1415
import { useStore } from './store/StoreContext';
1516
import { handleInitLoad } from './store/fetchUserAndData';
1617
import { getLastList, getRemember } from './store/getData';
@@ -53,6 +54,7 @@ function App() {
5354
<Route path='/reg/' component={Registration} exact />
5455
<Route path='/set/' component={Settings} exact />
5556
<Route path='/about/' component={Help} exact />
57+
<Route path='/load/' component={Loading} exact />
5658
<Route path='*' component={NotFound} />
5759
</Switch>
5860
<Toaster />

‎src/components/IconButton.js‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import { VscCheck, VscCircleSlash, VscSettingsGear, VscEmptyWindow, VscEdit,
3434
VscQuestion } from 'react-icons/vsc';
3535
import { FiLogIn, FiLogOut, FiUserPlus } from 'react-icons/fi';
3636
import { CgMoreR } from 'react-icons/cg';
37+
import { GiSpinalCoil } from 'react-icons/gi';
38+
3739

3840
const IconButton = ({ config }) => {
3941
const { caption, title, iconType, buttonLink, callProc, width, disabled } = config;
@@ -59,6 +61,8 @@ const IconButton = ({ config }) => {
5961

6062
let TheIcon;
6163
switch (iconType) {
64+
case 'spin':
65+
TheIcon=GiSpinalCoil; break;
6266
case 'add':
6367
TheIcon=VscEmptyWindow; break;
6468
case 'cancel':
@@ -148,27 +152,39 @@ const MakeSettingsButton = ( caption='' ) => {
148152
);
149153
};
150154

155+
const MakeSpinButton = ( caption='' ) => {
156+
const theConfig = {
157+
caption: caption,
158+
title: 'go for a spin',
159+
iconType: 'spin',
160+
buttonLink: `/load/`,
161+
};
162+
return (
163+
<IconButton config={ theConfig } />
164+
);
165+
};
166+
151167
const MakeHomeButton = ( caption='' ) => {
152-
const topConfig = {
168+
const theConfig = {
153169
caption: caption,
154170
title: 'go to top page',
155171
iconType: 'top',
156172
buttonLink: `/`,
157173
};
158174
return (
159-
<IconButton config={ topConfig } />
175+
<IconButton config={ theConfig } />
160176
);
161177
};
162178

163179
const MakeHelpButton = ( caption='' ) => {
164-
const helpConfig = {
180+
const theConfig = {
165181
caption: caption,
166182
title: 'about',
167183
iconType: 'help',
168184
buttonLink: `/about/`,
169185
};
170186
return (
171-
<IconButton config={ helpConfig } />
187+
<IconButton config={ theConfig } />
172188
);
173189
};
174190

@@ -179,4 +195,4 @@ const MakeDragIcon = () => {
179195
};
180196

181197
export { IconButton, MakeSettingsButton, MakeHomeButton, MakeDragIcon,
182-
MakeHelpButton };
198+
MakeHelpButton, MakeSpinButton };

‎src/components/Loading.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React from 'react';
22
import '../css/lists.css';
3+
import '../css/loading.css';
4+
import { Dots } from 'css-spinners-react';
35

46
const Loading = () => {
5-
67
return (
7-
<div className="main-show">
8-
... Loading ...
8+
<div className="main-loader">
9+
<div className="spindiv">
10+
<Dots />
11+
</div>
912
</div>
1013
);
1114

‎src/components/Settings.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { handleLogout, handleUpdateLastList, handleUpdateRemember,
77
import { useHistory } from 'react-router-dom';
88
import Loading from './Loading';
99
import Login2 from './Login2';
10-
import { IconButton, MakeHomeButton, MakeHelpButton } from './IconButton';
10+
import { IconButton, MakeHomeButton, MakeHelpButton, MakeSpinButton } from './IconButton';
1111
import { FormControl, FormLabel, FormControlLabel, Radio, TextField,
1212
RadioGroup } from '@material-ui/core';
1313
import { getGreeting, getFlatMode2, getNickname, getRemember } from '../store/getData';
@@ -89,12 +89,15 @@ const Settings = () => {
8989
const crumbArea = () => {
9090
return (
9191
<Fragment>
92-
<div className='crumbsandsettingsandhelp'>
92+
<div className='crumbsplusthree'>
9393
<div className='breadcrumbs'>
9494
<span className='oneCrumb'>
9595
Welcome { getGreeting(state) }
9696
</span>
9797
</div>
98+
<div className='helpicon'>
99+
{ MakeSpinButton() }
100+
</div>
98101
<div className='settingsicon'>
99102
{ MakeHomeButton() }
100103
</div>

‎src/css/loading.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
html {
2+
height: 100%;
3+
}
4+
5+
body {
6+
height: 100%;
7+
}
8+
9+
#root {
10+
height: 100%;
11+
}
12+
13+
.App {
14+
height: 100%;
15+
}
16+
17+
div.main-loader {
18+
padding: 0px 0 14px 0;
19+
margin: 0px 0 0px 0;
20+
font-size: 18px;
21+
text-align: center;
22+
background-color: #ffffff;
23+
width: 100%;
24+
max-width: 600px;
25+
height: 100%;
26+
}
27+
28+
div.spindiv {
29+
margin: 160px 0 40px 0;
30+
}
31+
32+
@media (min-width: 450px) { /* desktop */
33+
34+
}
35+
36+
@media (max-width: 449px) { /* device */
37+
div.main-loader {
38+
background-color: #33691e;
39+
}
40+
div.spindiv {
41+
margin: 140px 0 40px 0;
42+
}
43+
}
44+
45+
46+

‎yarn.lock‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
# yarn lockfile v1
33

44

5+
"@auth0/auth0-react@^1.6.0":
6+
version "1.6.0"
7+
resolved "https://registry.yarnpkg.com/@auth0/auth0-react/-/auth0-react-1.6.0.tgz#9175d9d1ee3379aaaacfb6bed4640d56f239f59f"
8+
integrity sha512-xjuNJnINMrJFbSpOSr9mjdVwfI9b+JbMKxoZy8R9Tmk3DGpBJ9eo69Im2RAeAWRISdrrxEZxNv9RAh9AQUvxEA==
9+
dependencies:
10+
"@auth0/auth0-spa-js" "^1.16.1"
11+
12+
"@auth0/auth0-spa-js@^1.16.1":
13+
version "1.17.0"
14+
resolved "https://registry.yarnpkg.com/@auth0/auth0-spa-js/-/auth0-spa-js-1.17.0.tgz#e48057471a2a639b80c96969072f1eb9ac32dd5e"
15+
integrity sha512-UqfulO/ycA9Lt3F7FKuwv3Xo+g+2bOs9kABPAz8uNvCjiwM891eRYARUKn8lLgeK30TNt2ot2DtpNHI3BVP0Jg==
16+
dependencies:
17+
abortcontroller-polyfill "^1.7.3"
18+
browser-tabs-lock "^1.2.14"
19+
core-js "^3.15.2"
20+
es-cookie "^1.3.2"
21+
fast-text-encoding "^1.0.3"
22+
promise-polyfill "^8.2.0"
23+
unfetch "^4.2.0"
24+
525
"@babel/code-frame@7.10.4":
626
version "7.10.4"
727
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -2285,6 +2305,11 @@ abab@^2.0.3:
22852305
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
22862306
integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
22872307

2308+
abortcontroller-polyfill@^1.7.3:
2309+
version "1.7.3"
2310+
resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz#1b5b487bd6436b5b764fd52a612509702c3144b5"
2311+
integrity sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==
2312+
22882313
accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
22892314
version "1.3.7"
22902315
resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -2993,6 +3018,13 @@ browser-process-hrtime@^1.0.0:
29933018
resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
29943019
integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
29953020

3021+
browser-tabs-lock@^1.2.14:
3022+
version "1.2.15"
3023+
resolved "https://registry.yarnpkg.com/browser-tabs-lock/-/browser-tabs-lock-1.2.15.tgz#d5012e652e2a0cb4eba471b0a2300c2fa5d92788"
3024+
integrity sha512-J8K9vdivK0Di+b8SBdE7EZxDr88TnATing7XoLw6+nFkXMQ6sVBh92K3NQvZlZU91AIkFRi0w3sztk5Z+vsswA==
3025+
dependencies:
3026+
lodash ">=4.17.21"
3027+
29963028
browserify-aes@^1.0.0, browserify-aes@^1.0.4:
29973029
version "1.2.0"
29983030
resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
@@ -3664,6 +3696,11 @@ core-js@^2.4.0:
36643696
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
36653697
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
36663698

3699+
core-js@^3.15.2:
3700+
version "3.16.3"
3701+
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.3.tgz#1f2d43c51a9ed014cc6c83440af14697ae4b75f2"
3702+
integrity sha512-lM3GftxzHNtPNUJg0v4pC2RC6puwMd6VZA7vXUczi+SKmCWSf4JwO89VJGMqbzmB7jlK7B5hr3S64PqwFL49cA==
3703+
36673704
core-js@^3.6.5:
36683705
version "3.9.0"
36693706
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.0.tgz#790b1bb11553a2272b36e2625c7179db345492f8"
@@ -3847,6 +3884,16 @@ css-select@^2.0.0, css-select@^2.0.2:
38473884
domutils "^1.7.0"
38483885
nth-check "^1.0.2"
38493886

3887+
css-spinners-react@^1.0.2:
3888+
version "1.0.2"
3889+
resolved "https://registry.yarnpkg.com/css-spinners-react/-/css-spinners-react-1.0.2.tgz#718534b5f8d323fb92734743342db7b4e97baf0d"
3890+
integrity sha512-8hmYiVIwVo0P2qhdaYxG7+jQLN28sPXbD+lfkpY5m4FGoAHaxvd8h9Q5FxPnT/TzblH7nEh0a9DlyFERbjH3eQ==
3891+
3892+
css-spinners@^1.0.1:
3893+
version "1.0.1"
3894+
resolved "https://registry.yarnpkg.com/css-spinners/-/css-spinners-1.0.1.tgz#8f367d646445ea4a5a7cadc9fb7402fcdb94fc98"
3895+
integrity sha512-b1QHdM6HR/PiCPUwDpj2O6dD2V3LmMpH0/xBP4SsNfd8GGft//2SxFV+iilHb01jw2r1d9tSrkHbX/BuRIpwYw==
3896+
38503897
css-tree@1.0.0-alpha.37:
38513898
version "1.0.0-alpha.37"
38523899
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -4540,6 +4587,11 @@ es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
45404587
string.prototype.trimend "^1.0.3"
45414588
string.prototype.trimstart "^1.0.3"
45424589

4590+
es-cookie@^1.3.2:
4591+
version "1.3.2"
4592+
resolved "https://registry.yarnpkg.com/es-cookie/-/es-cookie-1.3.2.tgz#80e831597f72a25721701bdcb21d990319acd831"
4593+
integrity sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==
4594+
45434595
es-to-primitive@^1.2.1:
45444596
version "1.2.1"
45454597
resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -5057,6 +5109,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
50575109
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
50585110
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
50595111

5112+
fast-text-encoding@^1.0.3:
5113+
version "1.0.3"
5114+
resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz#ec02ac8e01ab8a319af182dae2681213cfe9ce53"
5115+
integrity sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig==
5116+
50605117
fastq@^1.6.0:
50615118
version "1.10.1"
50625119
resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.10.1.tgz#8b8f2ac8bf3632d67afcd65dac248d5fdc45385e"
@@ -7260,7 +7317,7 @@ lodash.uniq@^4.5.0:
72607317
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
72617318
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
72627319

7263-
"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
7320+
"lodash@>=3.5 <5", lodash@>=4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
72647321
version "4.17.21"
72657322
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
72667323
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9100,6 +9157,11 @@ promise-inflight@^1.0.1:
91009157
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
91019158
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
91029159

9160+
promise-polyfill@^8.2.0:
9161+
version "8.2.0"
9162+
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.0.tgz#367394726da7561457aba2133c9ceefbd6267da0"
9163+
integrity sha512-k/TC0mIcPVF6yHhUvwAp7cvL6I2fFV7TzF1DuGPI8mBh4QQazf36xCKEHKTZKRysEoTQoQdKyP25J8MPJp7j5g==
9164+
91039165
promise@^8.1.0:
91049166
version "8.1.0"
91059167
resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
@@ -11116,6 +11178,11 @@ ua-parser-js@^0.7.24:
1111611178
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
1111711179
integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
1111811180

11181+
unfetch@^4.2.0:
11182+
version "4.2.0"
11183+
resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
11184+
integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
11185+
1111911186
unicode-canonical-property-names-ecmascript@^1.0.4:
1112011187
version "1.0.4"
1112111188
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"

0 commit comments

Comments
 (0)