Improved Loading Screen component;

- Added typing to necessary elements (TS)
carlohcs · Aug 15, 2021 · 72501d5 · 72501d5
1 parent 03d5245
commit 72501d5
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 26 deletions.
diff --git a/components/BodyBackground.tsx b/components/BodyBackground.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import { styled } from '../stiches.config'
+// import React from 'react'
+// import { styled } from '../stiches.config'
 
-const BodyBackgroundStyled = styled('div', {
-  background: '$loadingGradient',
-  height: '$full',
-})
+// const BodyBackgroundStyled = styled('div', {
+//   linearGradient: '$loadingGradient',
+//   height: '$full',
+// })
 
-const BodyBackground: React.FC = ({ children }) => {
-  return <BodyBackgroundStyled>{children}</BodyBackgroundStyled>
-}
+// const BodyBackground: React.FC = ({ children }) => {
+//   return <BodyBackgroundStyled className="main__content">{children}</BodyBackgroundStyled>
+// }
 
-export default BodyBackground
+// export default BodyBackground
diff --git a/components/LoadingScreen.tsx b/components/LoadingScreen.tsx
@@ -1,17 +1,47 @@
 import React from 'react'
 import { H1, P } from './basics'
-import BodyBackground from '@/components/BodyBackground'
+// import BodyBackground from '@/components/BodyBackground'
+import { styled } from '../stiches.config'
 
-const LoadingScreen: React.FC = () => {
+type LoadingScreenProps = {
+  stage: string
+}
+
+const BodyBackground: React.FC<LoadingScreenProps> = ({ children, stage = 'loading' }) => {
+  const BodyBackgroundStyled = styled('div', {
+    linearGradient: stage === 'loading' ? '$loadingGradient' : '$loadedGradient',
+    height: '$full',
+  })
+  return <BodyBackgroundStyled className="main__content">{children}</BodyBackgroundStyled>
+}
+
+const Container = styled('div', {
+  height: '$fullVh',
+  alignSelfCenter: true,
+  childrenAtCenter: 'column',
+  padding: '$xxs',
+  mW: '740px',
+})
+
+// https://stackoverflow.com/questions/61184591/how-to-implement-loading-screen-in-next-js
+const LoadingScreen: React.FC<LoadingScreenProps> = ({ stage = 'loading' }) => {
   return (
-    <BodyBackground>
-      <H1 text="Use headphones for the best experience" />
-      <P
-        text="Here the deepest feeling are explored: 
+    <BodyBackground stage={stage}>
+      <Container>
+        {stage === 'loading' ? (
+          <>
+            <H1 text="Use headphones for the best experience" />
+            <P
+              text="Here the deepest feeling are explored: 
 from loneliness, euphoria to the widest reflections.
 
 May the reflection of these be with you."
-      />
+            />
+          </>
+        ) : (
+          ''
+        )}
+      </Container>
     </BodyBackground>
   )
 }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,22 +1,34 @@
+import { useState } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 // import Image from 'next/image'
 // import styles from '../styles/Home.module.css'
 import LoadingScreen from '@/components/LoadingScreen'
+import { styled } from '../stiches.config'
+
+const Main = styled('div', {})
 
 const Home: NextPage = () => {
+  // https://dev.to/gabrielrufino/react-hook-usestate-in-typescript-4mn6
+  const [stage, setStage] = useState<string>('loading')
+
+  const changeBg = setTimeout(() => {
+    setStage('loaded')
+    clearTimeout(changeBg)
+  }, 3000)
+
   return (
-    <div>
+    <>
       <Head>
         <title>Loading | Carlota Sounds</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
-        <LoadingScreen />
-      </main>
-    </div>
+      <Main className="main">
+        <LoadingScreen stage={stage} />
+      </Main>
+    </>
   )
 }
 

diff --git a/stiches.config.js b/stiches.config.js
@@ -17,8 +17,9 @@ export const { styled, css, global, keyframes, getCssString, theme } = createCss
       neutralLight: 'hsla(192, 5%, 91%, 1)',
       neutralLightest: 'hsla(0, 0%, 100%, 1)',
 
-
-      loadingGradient: 'linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 100%)',
+      // https://cssgradient.io/
+      loadingGradient: '180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 100%',
+      loadedGradient: '180deg, rgba(2,0,36,1) 0%, rgba(177,158,54,1) 100%',
       bg_default: '$white',
     },
     space: {
@@ -102,6 +103,7 @@ export const { styled, css, global, keyframes, getCssString, theme } = createCss
       icon_xl: '$13',
       icon_xxl: '$16',
       full: '100%',
+      fullVh: '100vh',
       logo: '112px',
     },
     borderWidths: {
@@ -133,4 +135,25 @@ export const { styled, css, global, keyframes, getCssString, theme } = createCss
     zIndices: {},
     transitions: {},
   },
+  utils: {
+    // A property to apply linear gradient
+    linearGradient: (config) => (value) => ({
+      backgroundImage: `linear-gradient(${value})`,
+    }),
+    childrenAtCenter:
+      (config) =>
+      (value = 'column') => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: value,
+      }),
+    alignSelfCenter: (config) => (value) => ({
+      display: 'flex',
+      alignSelf: 'center',
+    }),
+    mW: (config) => (value) => ({
+      maxWidth: value,
+    }),
+  },
 })
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,5 +1,9 @@
 @import url('normalize.css');
 
+* {
+  box-sizing: border-box;
+}
+
 html,
 body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
@@ -22,6 +26,11 @@ body * {
   padding: 0;
 }
 
-#__next {
-  min-height: 100vh;
+#__next,
+.main,
+.main__content {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-basis: initial;
 }