From d7f4d59116a898010912545b31f29619c56384f3 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 4 Jul 2020 22:38:51 +0300
Subject: feat: add loader
---
src/components/Feed/Feed.tsx | 68 +++++++++++++++++++++++++++-----------------
1 file changed, 42 insertions(+), 26 deletions(-)
(limited to 'src/components/Feed')
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index afa914d..a56d57e 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -1,8 +1,9 @@
import React from 'react';
import { Poll } from 'which-types';
import { WindowScroller, AutoSizer, List } from 'react-virtualized';
-
+import CircularProgress from '@material-ui/core/CircularProgress';
import PollCard from '../PollCard/PollCard';
+import {makeStyles} from "@material-ui/core";
interface PropTypes {
polls: Poll[];
@@ -14,7 +15,18 @@ interface RenderPropTypes {
style: React.CSSProperties;
}
+const useStyles = makeStyles(theme => ({
+ loader: {
+ width:'100%',
+ textAlign:'center',
+ marginTop:theme.spacing(10)
+ }
+}));
+
const Feed: React.FC<PropTypes> = ({ polls }) => {
+ const classes = useStyles();
+
+
const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
const poll = polls[index];
return (
@@ -24,37 +36,41 @@ const Feed: React.FC<PropTypes> = ({ polls }) => {
);
};
- return (
- <WindowScroller>
- {({
+ const loader = <div className={classes.loader}>
+ <CircularProgress color="primary" style={{margin: '0 auto'}}/>
+ </div>
+
+ const list = <WindowScroller>
+ {({
height,
isScrolling,
registerChild,
onChildScroll,
scrollTop
}) => (
- <AutoSizer disableHeight>
- {({ width }) => (
- <div ref={registerChild}>
- <List
- autoHeight
- height={height}
- isScrolling={isScrolling}
- onScroll={onChildScroll}
- rowCount={polls.length}
- rowHeight={550}
- rowRenderer={RenderItem}
- scrollTop={scrollTop}
- width={width}
- containerStyle={{ pointerEvents: 'auto' }}
- overscanRowCount={1}
- />
- </div>
- )}
- </AutoSizer>
- )}
- </WindowScroller>
- );
+ <AutoSizer disableHeight>
+ {({ width }) => (
+ <div ref={registerChild}>
+ <List
+ autoHeight
+ height={height}
+ isScrolling={isScrolling}
+ onScroll={onChildScroll}
+ rowCount={polls.length}
+ rowHeight={550}
+ rowRenderer={RenderItem}
+ scrollTop={scrollTop}
+ width={width}
+ containerStyle={{ pointerEvents: 'auto' }}
+ overscanRowCount={1}
+ />
+ </div>
+ )}
+ </AutoSizer>
+ )}
+ </WindowScroller>
+
+ return polls.length ? list : loader;
};
export default Feed;
--
cgit v1.2.3