Fixed loading issue

docusaurus.config.js

@@ -14,9 +14,10 @@ module.exports = {
       respectPrefersColorScheme: true,
     },
     announcementBar: {
-      id: 'supportus',
+      id: 'github-star',
       content:
           '⭐️ If you like AgileTs, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/agile-ts/agile">GitHub</a>! ⭐️',
+      backgroundColor: "#9c9abf"
     },
     navbar: {
       title: 'AgileTs',

package.json

@@ -23,6 +23,7 @@
     "clsx": "^1.1.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-lazy-load-image-component": "^1.5.1",
     "react-spring": "^8.0.27",
     "styled-components": "^5.1.1"
   },

src/components/Card.tsx

@@ -1,16 +1,17 @@
 import React, {useCallback} from "react";
 import { useSpring, animated } from "react-spring";
 import styled from "styled-components";
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 export interface Props {
-    src: string,
+    image: string,
     width?: number,
     height?: number,
     onClick?: () => void
 }
 
 const Card: React.FC<Props> = (props) => {
-    const {src, width, height, onClick} = props;
+    const {image, width, height, onClick} = props;
 
     const [spring, setSpring] = useSpring(() => ({
         xys: [0, 0, 1],
@@ -25,7 +26,9 @@ const Card: React.FC<Props> = (props) => {
 
     return (
         <Container width={width} height={height} onClick={onClick} isClickable={!!onClick}>
-            <AnimatedCard src={src}
+            <AnimatedCard
+                src={image}
+                effect={"blur"}
                 onMouseMove={({ clientX: x, clientY: y }) =>
                     setSpring({
                         xys: calculateRotation(x, y, width, height),
@@ -56,7 +59,7 @@ const Container = styled.div<{width: number, height: number, isClickable: boolea
   cursor: ${props => props.isClickable ? "pointer" : "auto"};
 `;
 
-const AnimatedCard = styled(animated.img)`
+const AnimatedCard = styled(animated(LazyLoadImage))`
   border-radius: 5px;
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
   transition: box-shadow 0.5s;

src/page-parts/LandingPage/parts/CodeExample1View.tsx

@@ -4,14 +4,13 @@ import styled from "styled-components";
 import RandomComponent from "../../../components/RandomComponent";
 import {useWindowSize} from "../../../hooks/useWindowSize";
 
-
 const CodeExample1View: React.FC = () => {
     const windowSize = useWindowSize();
 
     return (
         <CodeExampleContainer>
             <Container>
-                <Card src={"img/first_state.svg"} width={windowSize.windowWidth / 2}
+                <Card image={"img/first_state.svg"} width={windowSize.windowWidth / 2}
                       height={windowSize.windowWidth / 3} onClick={() => {
                     window.open("https://codesandbox.io/s/agilets-first-state-f12cz?file=/src/RandomComponent.js");
                 }}/>

src/page-parts/LandingPage/parts/FeatureView.tsx

@@ -2,7 +2,7 @@ import {featuresData} from "../../../data/featuresData";
 import React from "react";
 import styled from "styled-components";
 import useBaseUrl from '@docusaurus/useBaseUrl';
-
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 const FeatureView: React.FC = () => {
 
@@ -11,7 +11,7 @@ const FeatureView: React.FC = () => {
         return (
             <FeatureContainer className="col">
                 {imgUrl && (
-                    <FeatureImage src={imgUrl} alt={title}/>
+                    <FeatureImage src={imgUrl} alt={title} effect={"blur"}/>
                 )}
                 <h3>{title}</h3>
                 <p>{description}</p>
@@ -35,7 +35,7 @@ const FeatureView: React.FC = () => {
 
 export default FeatureView;
 
-const FeatureImage = styled.img<{ width?: number, height?: number }>`
+const FeatureImage = styled(LazyLoadImage)<{ width?: number, height?: number }>`
   width: ${props => props.width || 250}px;
   height: ${props => props.height || 150}px;
   margin-bottom: 20px;

src/page-parts/LandingPage/parts/HeaderView.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, {useState} from "react";
 import styled from "styled-components";
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import {useWindowSize} from "../../../hooks/useWindowSize";
 import Button from "../../../components/Button";
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 const HeaderView: React.FC = () => {
     const windowSize = useWindowSize();
@@ -29,7 +30,16 @@ const HeaderView: React.FC = () => {
     return (
         windowSize.windowWidth > 1300 ?
             <header>
-                <Image src={"img/header_background.svg"} alt={"Header Background"}/>
+                <LazyLoadImage
+                    height={windowSize.windowWidth / 4.08}
+                    src={"img/header_background.svg"}
+                    alt={"Header Background"}
+                    placeholder={
+                        <header
+                            style={{backgroundColor: "#3F3D56", height: windowSize.windowWidth / 4.08}}
+                            className={'hero hero--primary'}
+                        />}
+                />
                 <ImageContent>
                     <HeaderContent/>
                 </ImageContent>
@@ -50,11 +60,6 @@ const Container = styled.div`
   text-align: center;
 `;
 
-const Image = styled.img`
-  width: 100%;
-  height: 100%;
-`;
-
 const ImageContent = styled.div`
   position: absolute;
   top: 150px;

src/page-parts/LandingPage/parts/IncludesView.tsx

@@ -8,15 +8,15 @@ import {useWindowSize} from "../../../hooks/useWindowSize";
 
 const IncludesView: React.FC = () => {
     const [open, setOpen] = useState(false);
-    const [showContent, setShowContent] = useState(false);
+    const [showItems, setShowItems] = useState(false);
     const windowSize = useWindowSize();
 
     useEffect(() => {
         if (open) {
-            setShowContent(true)
+            setShowItems(true)
         } else {
             setTimeout(() => {
-                setShowContent(false);
+                setShowItems(false);
             }, 800)
         }
     }, [open]);
@@ -49,7 +49,7 @@ const IncludesView: React.FC = () => {
 
     return (
         <Container>
-            <Main showContent={showContent}
+            <Main showItems={showItems}
                   style={{...mainSpringProps, width: mainSpringProps.size, height: mainSpringProps.size, transform: scaleSpringProps.scale.interpolate((s) => `scale(${s})`)}}
                   onClick={() => setOpen(open => !open)}
                   onMouseMove={() =>
@@ -64,7 +64,7 @@ const IncludesView: React.FC = () => {
                   }
             >
                 {
-                    showContent ?
+                    showItems ?
                         transitions.map(({item, key, props}) =>
                                     <Link to={useBaseUrl(item.route)}>
                                         <Item key={key} style={{...props}}>
@@ -77,7 +77,7 @@ const IncludesView: React.FC = () => {
                         <img src={"img/logo.svg"} alt={"Header Background"}/>
                 }
             </Main>
-            {showContent && <Background onClick={() => setOpen(false)} height={windowSize.scrollHeight}/>}
+            {showItems && <Background onClick={() => setOpen(false)} height={windowSize.scrollHeight}/>}
         </Container>
     )
 }
@@ -91,14 +91,14 @@ const Container = styled.div`
   height: 200px;
 `;
 
-const Main = styled(animated.div)<{ showContent: boolean }>`
+const Main = styled(animated.div)<{ showItems: boolean }>`
   position: absolute;
   display: grid;
   grid-template-columns: repeat(4, minmax(100px, 1fr));
-  grid-gap: ${props => props.showContent ? 25 : 0}px;
-  padding: ${props => props.showContent ? 25 : 0}px;
+  grid-gap: ${props => props.showItems ? 25 : 0}px;
+  padding: ${props => props.showItems ? 25 : 0}px;
   border-radius: 25px;
-  cursor: ${props => props.showContent ? "auto" : "pointer"};
+  cursor: ${props => props.showItems ? "auto" : "pointer"};
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
   will-change: width, height;
   z-index: 100;

yarn.lock

@@ -6466,6 +6466,11 @@ lodash.curry@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
   integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.defaults@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -6586,6 +6591,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -8699,6 +8709,14 @@ react-json-view@^1.19.1:
     react-lifecycles-compat "^3.0.4"
     react-textarea-autosize "^6.1.0"
 
+react-lazy-load-image-component@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.1.tgz#59cc92326ba5604e9c4a86805a2cf1667fafbc71"
+  integrity sha512-grTEZzURLHPkq7JoipcBBQU44ijdF4fH3Cb+eSD5eSAaMsjugbXqTaVWm5ruPUNLduoNR9KKQF6bOR9h2WphEg==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"