Merge pull request #11 from attech-org/feature/spin

Feature/spin
attech-org · Nov 26, 2021 · 2d77fe5 · 2d77fe5
2 parents 35d3f66 + 11432e5
commit 2d77fe5
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 58 deletions.
diff --git a/src/components/FiveFilmsCarousel.tsx b/src/components/FiveFilmsCarousel.tsx
@@ -1,4 +1,5 @@
-import { Carousel, Rate, Space } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Carousel, Rate, Space, Spin } from 'antd';
 import styled from 'styled-components';
 
 import { CarouselContainerProps } from '../containers/Dashboard';
@@ -66,10 +67,11 @@ const StyledRate = styled(Rate)`
 
 const FiveFilmsCarousel: React.FunctionComponent<CarouselContainerProps> = ({ movies }) => {
   const slidesCount = Math.ceil(movies.length / 5);
-
+  const antIcon = <LoadingOutlined style={{ color: 'red', fontSize: 24 }} spin />;
   return (
     <Content>
-      <TopTitle>Now Playing</TopTitle>
+      <TopTitle>Now Playing {!movies.length && <Spin indicator={antIcon} />}</TopTitle>
+
       <StyledCarousel autoplay dotPosition="bottom">
         {Array(slidesCount)
           .fill(0)

diff --git a/src/components/MainCarousel.tsx b/src/components/MainCarousel.tsx
@@ -1,4 +1,5 @@
-import { Button, Carousel, Rate } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Carousel, Rate, Spin } from 'antd';
 import styled from 'styled-components';
 
 import { CarouselContainerProps } from '../containers/Dashboard';
@@ -68,31 +69,46 @@ const Btn = styled(Button)`
     background: linear-gradient(#ac0000, #960000) !important;
   }
 `;
+const SpinContainer = styled(Wrapper)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(128, 128, 128, 0.24);
+  border-radius: 5px;
+`;
 
-const MainCarousel: React.FunctionComponent<CarouselContainerProps> = ({ movies }) => (
-  <Main>
-    <StyledCarousel dotPosition="bottom">
-      {movies
-        .map(({ imDbRating, title, image, id }) => (
-          <Wrapper resource={image.replace(/._.+\./, () => '._UX1000.')} key={id}>
-            <Content>
-              <Title>{title}</Title>
-              <StyledRate
-                tooltips={[imDbRating]}
-                disabled
-                allowHalf
-                count={5}
-                defaultValue={Number(imDbRating) / 2}
-              />
-              <Btn type="primary" size="middle" danger>
-                Watch now
-              </Btn>
-            </Content>
-          </Wrapper>
-        ))
-        .slice(0, 3)}
-    </StyledCarousel>
-  </Main>
-);
+const MainCarousel: React.FunctionComponent<CarouselContainerProps> = ({ movies }) => {
+  const antIcon = <LoadingOutlined style={{ color: 'red', fontSize: 24 }} spin />;
+  return (
+    <Main>
+      {!movies.length && (
+        <SpinContainer>
+          <Spin indicator={antIcon} />
+        </SpinContainer>
+      )}
+      <StyledCarousel dotPosition="bottom">
+        {movies
+          .map(({ imDbRating, title, image, id }) => (
+            <Wrapper resource={image.replace(/._.+\./, () => '._UX1000.')} key={id}>
+              <Content>
+                <Title>{title}</Title>
+                <StyledRate
+                  tooltips={[imDbRating]}
+                  disabled
+                  allowHalf
+                  count={5}
+                  defaultValue={Number(imDbRating) / 2}
+                />
+                <Btn type="primary" size="middle" danger>
+                  Watch now
+                </Btn>
+              </Content>
+            </Wrapper>
+          ))
+          .slice(0, 3)}
+      </StyledCarousel>
+    </Main>
+  );
+};
 
 export default MainCarousel;
diff --git a/src/components/SidePanel.tsx b/src/components/SidePanel.tsx
@@ -1,4 +1,5 @@
-import { Button, Rate } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Rate, Spin } from 'antd';
 import styled from 'styled-components';
 
 import { CarouselContainerProps } from '../containers/Dashboard';
@@ -49,33 +50,38 @@ const Btn = styled(Button)`
     background: linear-gradient(#ac0000, #960000) !important;
   }
 `;
-const SidePanel: React.FunctionComponent<CarouselContainerProps> = ({ movies }) => (
-  <Content>
-    <BoxTitle>Popular Movie</BoxTitle>
-    {movies
-      .map(({ image, id, title, year, imDbRating }) => (
-        <Wrapper key={id}>
-          <Image src={image.replace(/._.+\./, () => '._UX1000.')} alt="blabla" />
-          <Info>
-            <FilmTitle>
-              {title}
-              <Year>{year}</Year>
-            </FilmTitle>
 
-            <StyledRate
-              tooltips={[imDbRating]}
-              disabled
-              allowHalf
-              count={5}
-              defaultValue={Number(imDbRating) / 2}
-            />
-            <Btn type="primary" size="middle" danger>
-              Watch now
-            </Btn>
-          </Info>
-        </Wrapper>
-      ))
-      .slice(3, 8)}
-  </Content>
-);
+const SidePanel: React.FunctionComponent<CarouselContainerProps> = ({ movies }) => {
+  const antIcon = <LoadingOutlined style={{ color: 'red', fontSize: 24 }} spin />;
+  return (
+    <Content>
+      <BoxTitle>Popular Movie {!movies.length && <Spin indicator={antIcon} />}</BoxTitle>
+
+      {movies
+        .map(({ image, id, title, year, imDbRating }) => (
+          <Wrapper key={id}>
+            <Image src={image.replace(/._.+\./, () => '._UX1000.')} alt="blabla" />
+            <Info>
+              <FilmTitle>
+                {title}
+                <Year>{year}</Year>
+              </FilmTitle>
+
+              <StyledRate
+                tooltips={[imDbRating]}
+                disabled
+                allowHalf
+                count={5}
+                defaultValue={Number(imDbRating) / 2}
+              />
+              <Btn type="primary" size="middle" danger>
+                Watch now
+              </Btn>
+            </Info>
+          </Wrapper>
+        ))
+        .slice(3, 8)}
+    </Content>
+  );
+};
 export default SidePanel;