fix: cleanup

Author: wlee261

src/components/Themes/DesktopThemePreview.tsx

@@ -1,20 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import { Theme } from '../../interfaces/Theme';
+import Skeleton from "react-loading-skeleton";
 
-import '../../styles/theme_card.css';
-import ThemeModal from './ThemeModal';
+import { Theme } from "../../interfaces/Theme";
+
+import "../../styles/theme_card.css";
+import ThemeModal from "./ThemeModal";
 
 type Props = {
   theme: Theme;
   isPreviewed: boolean;
   onPreview: (name: string) => void;
+  isLoading: boolean;
 };
 
 /**
  * Theme card component to hold the details of each theme in the themes page.
  */
-const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
+const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview, isLoading }) => {
   const [viewDetails, setViewDetails] = useState(false);
 
   const onViewDetails = () => {
@@ -29,45 +32,47 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
     onClickPreview();
   };
 
+  if (isLoading) {
+    return (
+      <div>
+        <div className="my-4 mx-2 hidden md:block">
+          <Skeleton height={452} />
+        </div>
+        <div className="my-4 mx-2 block md:hidden">
+          <Skeleton height={148} />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <div
-        className={`flex flex-row items-center md:items-start md:flex-col md:w-64 p-4 my-4 mx-2 border-2 border-solid rounded-xl ${isPreviewed ? 'border-blue-700' : 'border-accent-600'}`}
+        className={`flex flex-row items-center md:items-start md:flex-col 
+        md:w-64 p-4 my-4 mx-2 border-2 border-solid rounded-xl 
+        ${isPreviewed ? "border-blue-700" : "border-accent-600"}`}
       >
-        <div className="flex-1 basis-1/3 md:basis-1/2 mr-3 flex flex-row overflow-hidden w-32 h-20 md:w-56 md:h-56 rounded-xl">
-          <img
-            src={theme.themeImg}
-            alt={theme.name}
-            className="w-60 h-60 object-cover object-left-top"
-          />
+        <div
+          className="flex-1 basis-1/3 md:basis-1/2 mr-3 flex flex-row
+        overflow-hidden w-32 h-20 md:w-56 md:h-56 rounded-xl"
+        >
+          <img src={theme.themeImg} alt={theme.name} className="w-60 h-60 object-cover object-left-top" />
         </div>
         <div className="flex-1 mr-4 basis-1/2 md:basis-1/3 flex flex-col md:pt-4">
           <h2 className="text-accent-50 text-lg font-medium mt-[-4px]">{theme.name}</h2>
           <span className="text-accent-300 text-sm">{theme.description}</span>
         </div>
         <div className="flex-1 basis-1/6 md:basis-1/6 flex flex-col">
-          <button
-            onClick={onViewDetails}
-            className="text-blue-500 text-sm my-4 w-20"
-          >
+          <button onClick={onViewDetails} className="text-blue-500 text-sm my-4 w-20">
             More Info (i)
           </button>
           <label className=" ml-[2px] text-accent-50 text-sm md:text-base">
             Select
-            <input
-              type="checkbox"
-              checked={isPreviewed}
-              onChange={handleCheckboxChange}
-              className="ml-2"
-            />
+            <input type="checkbox" checked={isPreviewed} onChange={handleCheckboxChange} className="ml-2" />
           </label>
         </div>
       </div>
-      <ThemeModal
-        isOpen={viewDetails}
-        theme={theme}
-        onClose={() => setViewDetails(false)}
-      />
+      <ThemeModal isOpen={viewDetails} theme={theme} onClose={() => setViewDetails(false)} />
     </>
   );
 };

src/components/Themes/ThemeCard.tsx

@@ -6,53 +6,54 @@ import { downloadThemeContent } from '../../utils';
 import { Theme } from '../../interfaces/Theme';
 
 type ThemeModalProps = {
-  isOpen: boolean
-  onClose: () => void
-  theme: Theme
-}
+  isOpen: boolean;
+  onClose: () => void;
+  theme: Theme;
+};
 
 /**
  * Modal to popup for showing theme details.
  */
 const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
-	const modalRef = useRef<HTMLDivElement>(null)
+	const modalRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
 			if (
 				modalRef.current &&
         !modalRef.current.contains(event.target as Node)
 			) {
-				onClose()
+				onClose();
 			}
-		}
+		};
 
 		if (isOpen) {
-			document.addEventListener('mousedown', handleClickOutside)
-			document.body.style.overflow = 'hidden'
+			document.addEventListener('mousedown', handleClickOutside);
+			document.body.style.overflow = 'hidden';
 		}
 
 		return () => {
-			document.removeEventListener('mousedown', handleClickOutside)
-			document.body.style.overflow = 'unset'
-		}
-	}, [isOpen, onClose])
+			document.removeEventListener('mousedown', handleClickOutside);
+			document.body.style.overflow = 'unset';
+		};
+	}, [isOpen, onClose]);
 
-	if (!isOpen) return null
+	if (!isOpen) return null;
 
 	const onDownload = () => {
 		downloadThemeContent(
 			theme.content.settings,
 			theme.content.inlineStyles,
 			theme.content.cssStyles,
 			theme.name
-		)
-	}
+		);
+	};
 
 	const modalContent = (
 		<div
 			className="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50
-        flex items-center justify-center pointer-events-auto">
+        flex items-center justify-center pointer-events-auto"
+		>
 			<div
 				ref={modalRef}
 				className="relative bg-white p-6 rounded-lg shadow-lg max-w-screen-lg w-full m-4"
@@ -126,12 +127,12 @@ const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
 				</div>
 			</div>
 		</div>
-	)
+	);
 
 	return ReactDOM.createPortal(
 		modalContent,
 		document.getElementById('modal-container') || document.body
-	)
-}
+	);
+};
 
-export default ThemeModal
+export default ThemeModal;