diff --git a/src/App.js b/src/App.js index e55aa10..cda4246 100644 --- a/src/App.js +++ b/src/App.js @@ -92,7 +92,7 @@ function App() { }, [dispatch]) useEffect(() => { - // loadData(); + loadData(); }, [loadData]) return ( diff --git a/src/components/Blog.js b/src/components/Blog.js index d22c9d0..48bb882 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -2,11 +2,14 @@ import { getDevtoArticle, getMediumArticle } from "article-api"; import moment from "moment"; import { useEffect, useState } from "react"; import { CgHashtag } from 'react-icons/cg'; +import { useSelector } from "react-redux"; import config from "../config"; import { skeleton } from "../helpers/utils"; +import LazyImage from "./LazyImage"; const Blog = () => { const [articles, setArticles] = useState(null); + const loading = useSelector(state => state.loading); useEffect(() => { if ( @@ -34,74 +37,127 @@ const Blog = () => { } }, []) - return ( -
-
-
-
-
-
    -
  • -
    -
    - {!articles ? skeleton({width: 'w-28', height: 'h-8'}) : 'Recent Posts'} -
    - { - !articles ? skeleton({width: 'w-8', height: 'h-8'}) : ( - - - - ) - } + const renderSkeleton = () => { + let array = []; + for (let index = 0; index < 2; index++) { + array.push(( +
    +
    +
    +
    +
    + { + skeleton({ + width: 'w-full', + height: 'h-full', + shape: '', + }) + } +
    +
    +
    +
    +
    +

    + {skeleton({ width: 'w-48', height: 'h-8', className: 'mb-2 mx-auto md:mx-0' })} +

    + {skeleton({ width: 'w-24', height: 'h-3', className: 'mx-auto md:mx-0' })} +
    + {skeleton({ width: 'w-full', height: 'h-4', className: 'mx-auto md:mx-0' })}
    -
    • -
+
+ {skeleton({ width: 'w-32', height: 'h-4', className: "md:mr-2 mx-auto md:mx-0" })} +
+
+
-
-
- { - articles && articles.slice(0, 5).map((article, index) => ( - -
-
-
-
- {'thumbnail'}/ -
+
+ )) + } + + return array; + } + + const renderArticles = () => { + return articles && articles.slice(0, 5).map((article, index) => ( + +
+
+ + )) + } + + return ( +
+
+
+
+
+
    +
  • +
    +
    + { + (loading || !articles) ? skeleton({ width: 'w-28', height: 'h-8' }) : ( + Recent Posts + ) + } +
    +
    +
    • +
+
+
+
+
+
+ {(loading || !articles) ? renderSkeleton() : renderArticles()} +
+
+
) } diff --git a/src/components/Education.js b/src/components/Education.js index d09897f..1972736 100644 --- a/src/components/Education.js +++ b/src/components/Education.js @@ -63,7 +63,7 @@ const Education = () => {
{item.institution}
-
+
{item.from} - {item.to}
diff --git a/src/components/Experience.js b/src/components/Experience.js index 525dea3..a5c4de0 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -61,7 +61,7 @@ const Experience = () => {
{experience.company}
-
+
{experience.from} - {experience.to}
diff --git a/src/components/Project.js b/src/components/Project.js index 9a791ba..42799db 100644 --- a/src/components/Project.js +++ b/src/components/Project.js @@ -2,9 +2,7 @@ import { Fragment } from "react"; import { useSelector } from "react-redux"; import { languageColor, skeleton } from "../helpers/utils"; import { AiFillStar, AiOutlineFork } from 'react-icons/ai'; -import { VscSourceControl } from 'react-icons/vsc'; import config from "../config"; -import { CgGitFork } from "react-icons/cg"; const LIMIT = 8;