From 6a75d1a97d83b50bd570e8903878528390b3dc0c Mon Sep 17 00:00:00 2001 From: guscarpim Date: Sat, 2 Oct 2021 12:05:43 -0300 Subject: [PATCH 1/4] add: Adding a condition to not always render the function --- pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 39a8005..5639416 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -42,7 +42,7 @@ const Home: NextPage = () => { return Loading! ; } - if (!data.success || !data.data) { + if (!data?.success || !data?.data) { return Error!; } @@ -65,7 +65,7 @@ const Home: NextPage = () => { { - renderViewer() + searchTerm && renderViewer() } { From cfa556c98638a663fbc7ba185a7b4349e8f395c9 Mon Sep 17 00:00:00 2001 From: guscarpim Date: Sat, 2 Oct 2021 12:56:00 -0300 Subject: [PATCH 2/4] Add: Insert styles animation in loading --- pages/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 5639416..05a50f6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,6 +9,8 @@ import MobileNavbar from '../components/navbar/navbar-mobile'; import useRepoData from '../hooks/use-repo-data'; import Viewer from '../components/viewer/viewer'; +import { Loading, Container, Error } from '../styles/Home/styles'; + /** * @summary Component to render the landing page. * @@ -39,11 +41,19 @@ const Home: NextPage = () => { */ const renderViewer = () => { if (isLoading) { - return Loading! ; + return ( + + + + ); } if (!data?.success || !data?.data) { - return Error!; + return ( + + Error + + ); } const { data: response } = data; From 45d56a998df509ae419fb02cac0ffc092b64d51d Mon Sep 17 00:00:00 2001 From: guscarpim Date: Sat, 2 Oct 2021 12:56:11 -0300 Subject: [PATCH 3/4] add: Styles loading --- styles/Home/styles.ts | 143 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 styles/Home/styles.ts diff --git a/styles/Home/styles.ts b/styles/Home/styles.ts new file mode 100644 index 0000000..780025a --- /dev/null +++ b/styles/Home/styles.ts @@ -0,0 +1,143 @@ +import styled from 'styled-components'; + +// eslint-disable-next-line import/prefer-default-export +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; +`; + +export const Loading = styled.div` + --w:10ch; + font-weight: bold; + font-family: monospace; + font-size: 30px; + line-height: 1.2em; + letter-spacing: var(--w); + width:var(--w); + overflow: hidden; + white-space: nowrap; + color:#0000; + animation: loading 2s infinite linear; + + &::before { + content:"Loading..."; + } + + @keyframes loading { + 0% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 4% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 8% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 12% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 16% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 20% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 24% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 28% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 32% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + 36% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 + } + 40%, + 60% { + text-shadow: + calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 64% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 68% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 72% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 76% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0 #000, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 80% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 84% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 88% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 92% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000 + } + 96% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 #000} + 100% { + text-shadow: + calc( 0*var(--w)) 0,calc(-1*var(--w)) 0,calc(-2*var(--w)) 0,calc(-3*var(--w)) 0,calc(-4*var(--w)) 0, + calc(-5*var(--w)) 0,calc(-6*var(--w)) 0,calc(-7*var(--w)) 0,calc(-8*var(--w)) 0,calc(-9*var(--w)) 0 + } + } +`; + +export const Error = styled.div` + font-weight: bold; + font-family: monospace; + font-size: 30px; + overflow: hidden; + white-space: nowrap; + color: red; +`; \ No newline at end of file From 88624ceb7826ae12c0081af120b2d5f8d5cc1568 Mon Sep 17 00:00:00 2001 From: guscarpim Date: Sat, 2 Oct 2021 12:56:25 -0300 Subject: [PATCH 4/4] add: Styled components --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 30ae305..deb0844 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@octokit/core": "^3.5.1", "@octokit/plugin-rest-endpoint-methods": "^5.10.2", + "@types/styled-components": "^5.1.14", "grommet": "^2.17.5", "grommet-icons": "^4.6.2", "next": "11.1.2", @@ -19,6 +20,7 @@ "react-dom": "17.0.2", "react-masonry-css": "^1.0.16", "sass": "^1.41.0", + "styled-components": "^5.3.1", "swr": "^1.0.1", "yaml": "^1.10.2" },