MangaList show Skeleton instead of empty space for loading manga

MangaCard remove Link from name, move it to Popup

tranga-website/src/Components/Manga.tsx

@@ -1,19 +1,27 @@
-import {
+import {Badge, Box, Card, CardContent, CardCover, Skeleton, Typography,} from "@mui/joy";
-    Badge,
-    Box,
-    Card,
-    CardContent, CardCover,
-    Link,
-} from "@mui/joy";
 import IManga from "../api/types/IManga.ts";
 import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {GetMangaById, GetMangaCoverImageUrl} from "../api/Manga.tsx";
 import {ApiUriContext, getData} from "../api/fetchApi.tsx";
-import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
+import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
 import {SxProps} from "@mui/joy/styles/types";
 import MangaPopup from "./MangaPopup.tsx";
 import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
 
+export const CardWidth = 190;
+export const CardHeight = 300;
+
+const coverSx : SxProps = {
+    height: CardHeight + "px",
+    width: CardWidth + "px",
+    position: "relative",
+}
+
+const coverCss : CSSProperties = {
+    maxHeight: "calc("+CardHeight+"px + 2rem)",
+    maxWidth: "calc("+CardWidth+"px + 2rem)",
+}
+
 export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
     const [manga, setManga] = useState<IManga>();
 
@@ -29,14 +37,33 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
 
     return (
         <>
-            {manga === undefined ? <></> : <Manga manga={manga} children={children} /> }
+            {manga === undefined ?
+                <Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
+                    <Card sx={{height:"fit-content",width:"fit-content"}}>
+                        <CardCover>
+                            <img style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
+                        </CardCover>
+                        <CardCover sx={{
+                            background:
+                                'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
+                        }}/>
+                        <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
+                            <Box sx={coverSx}>
+                                <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                                    <Skeleton loading={true} animation={"wave"}>
+                                        {"x ".repeat(Math.random()*25+5)}
+                                    </Skeleton>
+                                </Typography>
+                            </Box>
+                        </CardContent>
+                    </Card>
+                </Badge>
+                 :
+                <Manga manga={manga} children={children} /> }
         </>
     );
 }
 
-export const CardWidth = 190;
-export const CardHeight = 300;
-
 export function Manga({manga: manga, children} : { manga: IManga, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
     const CoverRef = useRef<HTMLImageElement>(null);
 
@@ -60,18 +87,7 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
         getData(coverUrl).then(() => {
             if(CoverRef.current) CoverRef.current.src = coverUrl;
         });
-    }, [manga, apiUri])
+    }, [manga, apiUri]);
-
-    const coverSx : SxProps = {
-        height: CardHeight + "px",
-        width: CardWidth + "px",
-        position: "relative",
-    }
-
-    const coverCss : CSSProperties = {
-        maxHeight: "calc("+CardHeight+"px + 2rem)",
-        maxWidth: "calc("+CardWidth+"px + 2rem)",
-    }
 
     const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
 
@@ -95,9 +111,9 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
                 }}/>
                 <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
                     <Box sx={coverSx}>
-                        <Link href={manga.websiteUrl} level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                        <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
                             {mangaName}
-                        </Link>
+                        </Typography>
                     </Box>
                 </CardContent>
                 <MangaPopup manga={manga} open={expanded}>{children}</MangaPopup>

tranga-website/src/Components/MangaPopup.tsx

@@ -1,5 +1,5 @@
 import IManga from "../api/types/IManga.ts";
-import {Badge, Box, Chip, CircularProgress, Drawer, Input, Skeleton, Stack, Typography} from "@mui/joy";
+import {Badge, Box, Chip, CircularProgress, Drawer, Input, Link, Skeleton, Stack, Typography} from "@mui/joy";
 import {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
 import {ApiUriContext, getData} from "../api/fetchApi.tsx";
@@ -70,7 +70,9 @@ export default function MangaPopup({manga, open, children} : {manga: IManga | nu
                              onLoad={LoadMangaCover}/>
                     </Badge>
                     <Box>
-                        <Typography level={"h2"} marginTop={"20px"}>{manga?.name}</Typography>
+                        <Link href={manga?.websiteUrl} level={"h2"}>
+                            {manga?.name}
+                        </Link>
                         <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
                             {manga?.authors?.map(author => <AuthorTag key={author.authorId} author={author} color={"success"} />)}
                             {manga?.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}