From 7b4fd503505d1337bf3fdbf7ff8a279ebaf7a737 Mon Sep 17 00:00:00 2001
From: Alezco <benjaminmorali4@hotmail.fr>
Date: Thu, 27 Aug 2020 16:10:29 +0200
Subject: [PATCH] feat: improve social page

---
 src/pages/social.tsx | 45 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/pages/social.tsx b/src/pages/social.tsx
index 756e981d..2bc4b929 100644
--- a/src/pages/social.tsx
+++ b/src/pages/social.tsx
@@ -1,5 +1,8 @@
-import { Box } from "@material-ui/core";
-import React, { FC } from "react";
+import { useTheme } from "@material-ui/core";
+import Box from "@material-ui/core/Box";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Grid from "@material-ui/core/Grid";
+import React, { FC, useCallback, useState } from "react";
 import TweetEmbed from "react-tweet-embed";
 
 import SEO from "../components/seo";
@@ -7,18 +10,42 @@ import { tweetIds } from "../display-data/tweets-data";
 import Layout from "../layout";
 
 const Social: FC = () => {
+  const theme = useTheme();
+
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const onTweetLoad = useCallback(() => {
+    setIsLoaded(true);
+  }, [setIsLoaded]);
+
   return (
     <Layout>
       <SEO title="Social" />
-      <Box>
+      {!isLoaded && (
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+          width="100%"
+        >
+          <CircularProgress />
+          <div>Chargement des tweets en cours...</div>
+        </Box>
+      )}
+      <Grid container spacing={1}>
         {tweetIds.map((tweet: string, index: number) => (
-          <TweetEmbed
-            key={`${tweet}-${index}`}
-            id={tweet}
-            placeholder={"Chargement du tweet en cours..."}
-          />
+          <Grid key={`${tweet}-${index}`} item md={6}>
+            <TweetEmbed
+              id={tweet}
+              onTweetLoadSuccess={onTweetLoad}
+              onTweetLoadError={onTweetLoad}
+              options={{ theme: theme.palette.type }}
+            />
+          </Grid>
         ))}
-      </Box>
+      </Grid>
     </Layout>
   );
 };