WJ-111 - New: EntitySummary skeleton;

src/containers/EntityImageList/Loading/styles.ts

@@ -16,7 +16,7 @@ export const ListContainer = styled<any>(ListContainerDefault)`
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 20;
+    z-index: 10;
 
     background: linear-gradient(
       to right,

src/containers/EntitySummary/Loading/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { EntityImageLoading } from 'containers';
+import {
+  Container,
+  ImageContainer,
+  DetailsContainer,
+} from 'containers/EntitySummary/styles';
+import {
+  ShortLabelSkeleton,
+  MediumLabelSkeleton,
+  LongLabelSkeleton,
+} from './styles';
+
+const EntitySummaryLoading: React.FC<any> = ({ size }) => {
+  return (
+    <Container>
+      <ImageContainer>
+        <EntityImageLoading size={size} />
+      </ImageContainer>
+      <DetailsContainer>
+        <MediumLabelSkeleton />
+        <ShortLabelSkeleton />
+        <LongLabelSkeleton />
+        <MediumLabelSkeleton />
+      </DetailsContainer>
+    </Container>
+  );
+};
+
+export default EntitySummaryLoading;

src/containers/EntitySummary/Loading/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+import { Size } from 'shared/enums';
+import { Skeleton } from 'components';
+
+export const ShortLabelSkeleton = styled(Skeleton)`
+  height: ${Size.Default};
+  width: 15%;
+  border-radius: ${Size.Largest};
+
+  margin-bottom: ${Size.Default};
+`;
+
+export const MediumLabelSkeleton = styled(Skeleton)`
+  height: ${Size.Default};
+  width: 30%;
+  border-radius: ${Size.Largest};
+
+  margin-bottom: ${Size.Smallest};
+`;
+
+export const LongLabelSkeleton = styled(Skeleton)`
+  height: ${Size.Default};
+  width: 90%;
+  border-radius: ${Size.Default};
+
+  margin-bottom: ${Size.Smallest};
+`;

src/containers/EntitySummary/index.tsx

@@ -15,7 +15,7 @@ import {
   Description,
 } from './styles';
 
-const EntitySummary: React.FC<Props> = ({ data }) => {
+const EntitySummary: React.FC<Props> = ({ data, size }) => {
   const history = useHistory();
   const { successCloseModal } = useModal();
 
@@ -28,7 +28,7 @@ const EntitySummary: React.FC<Props> = ({ data }) => {
   return (
     <Container>
       <ImageContainer>
-        <EntityImage {...data} size="small" showEmpty />
+        <EntityImage {...data} size={size} showEmpty />
       </ImageContainer>
       <DetailsContainer onClick={handleRedirect}>
         <Title mediaType={data.mediaType}>{data.title}</Title>

src/containers/EntitySummary/types/ContainerProps.ts

@@ -1,3 +1,4 @@
 export default interface ContainerProps {
   mediaType?: number;
+  size?: string;
 }

src/containers/EntitySummaryList/Loading/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import ContainerProps from 'containers/EntityImage/types/ContainerProps';
+import { EntitySummaryLoading } from 'containers';
+import { Container } from './styles';
+
+const EntitySummaryListLoading: React.FC<ContainerProps> = ({ size }) => {
+  return (
+    <Container>
+      <EntitySummaryLoading size={size} />
+      <EntitySummaryLoading size={size} />
+    </Container>
+  );
+};
+
+export default EntitySummaryListLoading;

src/containers/EntitySummaryList/Loading/styles.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { Color } from 'shared/enums';
+import { getBackground } from 'shared/helpers';
+import { Container as ContainerDefault } from 'containers/EntitySummaryList/styles';
+
+export const Container = styled<any>(ContainerDefault)`
+  position: relative;
+  overflow-x: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+
+    background: linear-gradient(
+      to bottom,
+      ${Color.Transparent} 0%,
+      ${Color.Transparent} 40%,
+      ${props => getBackground(props.theme, props.background, Color.Fill)} 90%,
+      ${props => getBackground(props.theme, props.background, Color.Fill)} 100%
+    );
+  }
+`;

src/containers/EntitySummaryList/index.tsx

@@ -2,28 +2,35 @@ import React from 'react';
 
 import Props from 'containers/EntitySummaryList/types';
 
-import { ReactComponent as Loading } from 'assets/loading.svg';
-import { EntitySummary } from 'containers';
-import { Container } from './styles';
+import { ReactComponent as Empty } from 'assets/empty.svg';
+import { EntitySummary, EntitySummaryListLoading } from 'containers';
+import { Container, EmptyContainer, EmptyImage, EmptyLabel } from './styles';
 
 const EntitySummaryList: React.FC<Props> = ({
   data = [],
   isLoading = false,
-  theme,
-  color,
+  size,
+  emptyMessage = 'Ops... Nenhum resultado encontrado.',
 }) => {
   if (isLoading) {
+    return <EntitySummaryListLoading size={size} />;
+  }
+
+  if (data.length === 0) {
     return (
-      <Container>
-        <Loading />
-      </Container>
+      <EmptyContainer>
+        <EmptyImage>
+          <Empty />
+        </EmptyImage>
+        <EmptyLabel>{emptyMessage}</EmptyLabel>
+      </EmptyContainer>
     );
   }
 
   return (
     <Container>
       {data.map((result: any) => {
-        return <EntitySummary data={result} key={data.id} />;
+        return <EntitySummary data={result} key={data.id} size={size} />;
       })}
     </Container>
   );

src/containers/EntitySummaryList/styles.ts

@@ -1,7 +1,28 @@
 import styled from 'styled-components';
+import { Color, Size } from 'shared/enums';
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
 `;
+
+export const EmptyContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: ${Size.Large};
+`;
+export const EmptyImage = styled.div`
+  svg {
+    max-height: 200px;
+    width: 100%;
+  }
+`;
+export const EmptyLabel = styled.div`
+  margin-top: ${Size.Default};
+  font-size: ${Size.Medium};
+  color: ${Color.Text};
+  text-align: center;
+`;

src/containers/EntitySummaryList/types/index.ts

@@ -2,5 +2,7 @@ import DefaultProps from 'shared/types';
 
 export default interface ResultProps extends DefaultProps {
   data: any;
+  size?: 'small' | 'large';
+  emptyMessage?: string;
   isLoading?: boolean;
 }

src/containers/SearchModal/index.tsx

@@ -3,18 +3,9 @@ import { debounce } from 'lodash';
 
 import { Multi } from 'domains/Search/api';
 
-import { ReactComponent as Loading } from 'assets/loading.svg';
-import { ReactComponent as Empty } from 'assets/empty.svg';
 import { SearchInput } from 'components';
 import { EntitySummaryList } from 'containers';
-import {
-  Container,
-  ResultsContainer,
-  LoadingContainer,
-  EmptyContainer,
-  EmptyImage,
-  EmptyLabel,
-} from './styles';
+import { Container, ResultsContainer } from './styles';
 
 const SearchModal: React.FC<any> = ({ onClose }) => {
   const minLength = useMemo(() => 3, []);
@@ -56,24 +47,7 @@ const SearchModal: React.FC<any> = ({ onClose }) => {
       <SearchInput onKeyUp={(e: any) => handleSearch(e.target.value)} />
       {keyword.length >= minLength && (
         <ResultsContainer>
-          {isLoading && (
-            <LoadingContainer>
-              <Loading />
-            </LoadingContainer>
-          )}
-
-          {!isLoading && data?.length > 0 && (
-            <EntitySummaryList data={data} isLoading={isLoading} />
-          )}
-
-          {!isLoading && data?.length === 0 && (
-            <EmptyContainer>
-              <EmptyImage>
-                <Empty />
-              </EmptyImage>
-              <EmptyLabel>Ops... Nenhum resultado encontrado.</EmptyLabel>
-            </EmptyContainer>
-          )}
+          <EntitySummaryList data={data} isLoading={isLoading} size="small" />
         </ResultsContainer>
       )}
     </Container>

src/containers/SearchModal/styles.ts

@@ -34,23 +34,3 @@ export const Results = styled.div`
   display: flex;
   flex: 1;
 `;
-
-export const EmptyContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: ${Size.Large};
-`;
-export const EmptyImage = styled.div`
-  svg {
-    max-height: 200px;
-    width: 100%;
-  }
-`;
-export const EmptyLabel = styled.div`
-  margin-top: ${Size.Default};
-  font-size: ${Size.Medium};
-  color: ${Color.Text};
-  text-align: center;
-`;

src/containers/index.ts

@@ -9,7 +9,10 @@ export { default as EntityImageList } from './EntityImageList';
 export { default as EntityImageListLoading } from './EntityImageList/Loading';
 
 export { default as EntitySummary } from './EntitySummary';
+export { default as EntitySummaryLoading } from './EntitySummary/Loading';
+
 export { default as EntitySummaryList } from './EntitySummaryList';
+export { default as EntitySummaryListLoading } from './EntitySummaryList/Loading';
 
 export { default as Filmography } from './Filmography';
 export { default as FilmographyLoading } from './Filmography/Loading';