Skip to content

Commit 2e2a8d9

Browse files
author
Jovert Lota Palonpon
committed
[Master] Implemented skeleton loading
1 parent 7bbb4a4 commit 2e2a8d9

File tree

9 files changed

+176
-9
lines changed

9 files changed

+176
-9
lines changed

‎resources/js/icons/flags/1x1/Ph.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { SvgIcon } from '@material-ui/core';
33

4-
export const Ph = props => (
4+
const Ph = props => (
55
<SvgIcon
66
{...props}
77
xmlns="http://www.w3.org/2000/svg"
@@ -23,3 +23,5 @@ export const Ph = props => (
2323
</g>
2424
</SvgIcon>
2525
);
26+
27+
export default Ph;

‎resources/js/icons/flags/1x1/Us.js

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/icons/flags/1x1/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Ph } from './Ph';
2+
export { default as Us } from './Us';

‎resources/js/icons/flags/4x3/Ph.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { SvgIcon } from '@material-ui/core';
33

4-
export const Ph = props => (
4+
const Ph = props => (
55
<SvgIcon
66
{...props}
77
xmlns="http://www.w3.org/2000/svg"
@@ -23,3 +23,5 @@ export const Ph = props => (
2323
</g>
2424
</SvgIcon>
2525
);
26+
27+
export default Ph;

‎resources/js/icons/flags/4x3/Us.js

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/icons/flags/4x3/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Ph } from './Ph';
2+
export { default as Us } from './Us';

‎resources/js/views/__backoffice/Home.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ class Home extends Component {
1515
name: 'Overview',
1616
active: true,
1717
},
18+
19+
{
20+
name: 'Monthly',
21+
active: false,
22+
},
1823
];
1924

2025
return (

‎resources/js/views/__backoffice/partials/Header.js

Lines changed: 154 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Badge,
88
Button,
99
ClickAwayListener,
10+
colors,
1011
Divider,
1112
Grid,
1213
Grow,
@@ -36,8 +37,8 @@ import {
3637
Settings as SettingsIcon,
3738
} from '@material-ui/icons';
3839

39-
import { Ph as PhIcon } from '../../../icons/flags/4x3/Ph';
40-
import { Us as UsIcon } from '../../../icons/flags/4x3/Us';
40+
import { Ph as PhIcon, Us as UsIcon } from '../../../icons/flags/4x3';
41+
import { Skeleton } from '../../../ui';
4142

4243
const LocaleMenu = props => {
4344
const { classes, parentProps } = props;
@@ -229,12 +230,158 @@ const Header = props => {
229230
tabs,
230231
localeMenuOpen,
231232
accountMenuOpen,
232-
mobileOpen,
233233
} = parentProps;
234234

235-
const { user } = pageProps;
235+
const { user, navigating } = pageProps;
236236

237-
return (
237+
const skeletonProps = {
238+
color: colors.grey[400],
239+
highlightColor: colors.grey[200],
240+
};
241+
242+
const renderNavigating = (
243+
<>
244+
<AppBar
245+
color="primary"
246+
position="sticky"
247+
elevation={0}
248+
className={classes.primaryBar}
249+
>
250+
<Toolbar>
251+
<Grid container spacing={8} alignItems="center">
252+
<Hidden smUp>
253+
<Grid item>
254+
<IconButton
255+
color="inherit"
256+
aria-label="Open drawer"
257+
className={classes.menuButton}
258+
>
259+
<Skeleton
260+
{...skeletonProps}
261+
height={25}
262+
width={25}
263+
/>
264+
</IconButton>
265+
</Grid>
266+
</Hidden>
267+
268+
<Grid item xs />
269+
270+
<Grid item>
271+
<Skeleton
272+
{...skeletonProps}
273+
height={20}
274+
width={70}
275+
className={classes.link}
276+
/>
277+
</Grid>
278+
279+
<Grid item>
280+
<IconButton color="inherit">
281+
<Skeleton
282+
{...skeletonProps}
283+
circle
284+
height={30}
285+
width={30}
286+
/>
287+
</IconButton>
288+
</Grid>
289+
290+
<Grid item>
291+
<IconButton color="inherit">
292+
<Skeleton
293+
{...skeletonProps}
294+
circle
295+
height={30}
296+
width={30}
297+
/>
298+
</IconButton>
299+
</Grid>
300+
301+
<Grid item>
302+
<IconButton color="inherit">
303+
<Skeleton
304+
{...skeletonProps}
305+
circle
306+
height={30}
307+
width={30}
308+
/>
309+
</IconButton>
310+
</Grid>
311+
</Grid>
312+
</Toolbar>
313+
</AppBar>
314+
315+
<AppBar
316+
component="div"
317+
className={classes.secondaryBar}
318+
color="primary"
319+
position="static"
320+
elevation={0}
321+
>
322+
<Toolbar>
323+
<Grid container alignItems="center" spacing={8}>
324+
<Grid item xs>
325+
<Skeleton
326+
height={30}
327+
width={100 + pageTitle.length * 2}
328+
{...skeletonProps}
329+
className={classes.button}
330+
/>
331+
</Grid>
332+
333+
{primaryAction && (
334+
<Grid item>
335+
<Skeleton
336+
{...skeletonProps}
337+
height={30}
338+
width={50 + primaryAction.text.length * 2}
339+
className={classes.button}
340+
/>
341+
</Grid>
342+
)}
343+
344+
<Grid item>
345+
<IconButton color="inherit">
346+
<Skeleton
347+
{...skeletonProps}
348+
circle
349+
height={25}
350+
width={25}
351+
/>
352+
</IconButton>
353+
</Grid>
354+
</Grid>
355+
</Toolbar>
356+
</AppBar>
357+
358+
<AppBar
359+
component="div"
360+
className={classes.secondaryBar}
361+
color="primary"
362+
position="static"
363+
elevation={0}
364+
>
365+
<Tabs value={0} textColor="inherit">
366+
{tabs.map((tab, key) => (
367+
<Tab
368+
key={key}
369+
textColor="inherit"
370+
label={
371+
<Skeleton
372+
{...skeletonProps}
373+
height={20}
374+
width={30 + tab.name.length * 2}
375+
/>
376+
}
377+
/>
378+
))}
379+
</Tabs>
380+
</AppBar>
381+
</>
382+
);
383+
384+
const renderNavigated = (
238385
<>
239386
<AppBar
240387
color="primary"
@@ -400,6 +547,8 @@ const Header = props => {
400547
</AppBar>
401548
</>
402549
);
550+
551+
return <>{navigating ? renderNavigating : renderNavigated}</>;
403552
};
404553

405554
Header.propTypes = {

‎resources/js/views/__backoffice/users/List.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@ class List extends Component {
309309
type: sortType ? sortType : prevState.sorting.type,
310310
},
311311
filters: filters ? filters : prevState.filters,
312+
message: {},
312313
};
313314
});
314315
} catch (error) {

0 commit comments

Comments
 (0)