From d8a3f908cce122da0b3b711c01548aae2fbfd492 Mon Sep 17 00:00:00 2001
From: dunemask <elijah@dunemask.net>
Date: Sat, 26 Aug 2023 18:43:38 +0000
Subject: [PATCH] [FIX] Fixed CSS not displaying properly for skills (#6)

Co-authored-by: dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.net/elysium/nile/pulls/6
---
 index.html                 |  2 +-
 src/pages/delta/Skills.jsx | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f1fca3c..2b8d804 100644
--- a/index.html
+++ b/index.html
@@ -149,7 +149,7 @@
           const mediaCover = document.getElementById(
             "loading-content-media-cover",
           );
-          if (mediaCover === null && mediaCover.style === null) return;
+          if (mediaCover === null || mediaCover.style === null) return;
           mediaCover.style.display = "block";
         }
 
diff --git a/src/pages/delta/Skills.jsx b/src/pages/delta/Skills.jsx
index 0fedd1f..d807386 100644
--- a/src/pages/delta/Skills.jsx
+++ b/src/pages/delta/Skills.jsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useState, useEffect } from "react";
 import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
 import { SiJavascript } from "react-icons/si";
 import Typography from "@mui/material/Typography";
@@ -13,7 +13,10 @@ const Carousel = React.lazy(() => import("react-material-ui-carousel"));
 export default function Skills() {
   const [image, setImage] = useState();
   const [open, setOpen] = useState(false);
+  const [carouselInterval, setCarouselInterval] = useState(200);
 
+  useEffect(()=>{setTimeout(()=>setCarouselInterval(7000),500)},[]); // Mitigates bug where height doesn't load properly
+	
   function openPhoto(image) {
     setImage(image);
     setOpen(true);
@@ -177,15 +180,16 @@ export default function Skills() {
           >
             <Suspense
               fallback={
-                <Skeleton variant="rectangular" width="374px" height="374px" />
+                <Skeleton variant="rectangular" width="374px" height="100%" />
               }
             >
               <Carousel
-                interval={8000}
+                interval={carouselInterval}
                 navButtonsAlwaysVisible
                 indicatorContainerProps={{ style: { display: "none" } }}
                 stopAutoPlayOnHover={true}
-                sx={{ minHeight: 481 }}
+                sx={{ height: "100%"}}
+	  	animation="slide"
               >
                 {skills.map((skill, i) => (
                   <React.Fragment key={skill}>{skill}</React.Fragment>