[Bug]: Custom Component is taking too long to load and resulting in heap memory out of usage.
harshagr64 opened this issue · comments
Contact Details
No response
What happened?
I have the below file containing my custom component, can you help me understand why Admin JS is taking so long to load the UI.
Before using this file in my code, Admin js loaded instantly, but now it is taking almost 1 minute to load the UI page.
import { ActionProps } from "adminjs";
import React from "react";
import {
Card,
CardContent,
IconButton,
ImageList,
ImageListItem,
ImageListItemBar,
Stack,
Typography,
} from "@mui/material";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import axios from "axios";
// import "./styles.css";
const CustomDetailsPage = (props: ActionProps) => {
// Assuming 'data' is an object with properties: name, colonyId, number, images
// const { name, colonyId, number, images } = props;
const model = { Colony: "colonyModel", Property: "propertyModel" };
const { record, action } = props;
const params = record?.params ?? {};
const images = [];
const currentUrl = window.location.origin;
const detailValue = (name) => {
if (record?.populated?.[name]) {
return record?.populated?.[name]?.params?.name;
}
return null;
};
const deleteImage = async (id, imageArray) => {
// console.log(dbModel, id, imageArray);
const { resourceId } = action;
const result = imageArray.splice(id, 1);
try {
const response = await axios.post(`${currentUrl}/product/delete-image`, {
model: model[resourceId],
images: imageArray,
id: params._id,
});
window.location.reload();
} catch (error) {
console.error("Error fetching data:", error);
}
};
for (const key in params) {
if (key.startsWith("images")) {
images.push(params[key]);
delete params[key]; // Remove individual "images" fields
}
}
params.images = images;
return (
<Card>
<CardContent>
{Object.entries(params).map(([key, value]) => (
<Stack direction="column" spacing={0.5} key={key} sx={{ mb: 3 }}>
<Typography
sx={{
fontFamily: "Roboto, sans-serif",
fontSize: "12px",
color: "rgb(137, 138, 154)",
}}
>
{key}:
</Typography>
{key?.includes("images") ? (
<ImageList
sx={{ width: 500, height: 450 }}
rowHeight={164}
cols={2}
>
{value?.map((item, id) => (
<ImageListItem key={id}>
<img
alt="testing"
loading="lazy"
src={`${currentUrl}/public/uploads/${item}`}
/>
<ImageListItemBar
sx={{
background:
"linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, " +
"rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)",
}}
position="top"
actionIcon={
<IconButton
sx={{ color: "white" }}
onClick={() => deleteImage(id, value)}
>
<DeleteOutlineIcon />
</IconButton>
}
actionPosition="right"
/>
</ImageListItem>
))}
</ImageList>
) : (
<Typography
sx={{
fontFamily: "Roboto, sans-serif",
fontSize: "14px",
}}
>
{detailValue(key) ?? value}
</Typography>
)}
</Stack>
))}
</CardContent>
</Card>
);
};
export default CustomDetailsPage;
Bug prevalence
Multiple Times
AdminJS dependencies version
v7.2.0
What browsers do you see the problem on?
Firefox, Chrome, Safari, Microsoft Edge
Relevant log output
No response
Relevant code that's giving you issues
import { ActionProps } from "adminjs";
import React from "react";
import {
Card,
CardContent,
IconButton,
ImageList,
ImageListItem,
ImageListItemBar,
Stack,
Typography,
} from "@mui/material";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import axios from "axios";
// import "./styles.css";
const CustomDetailsPage = (props: ActionProps) => {
// Assuming 'data' is an object with properties: name, colonyId, number, images
// const { name, colonyId, number, images } = props;
const model = { Colony: "colonyModel", Property: "propertyModel" };
const { record, action } = props;
const params = record?.params ?? {};
const images = [];
const currentUrl = window.location.origin;
const detailValue = (name) => {
if (record?.populated?.[name]) {
return record?.populated?.[name]?.params?.name;
}
return null;
};
const deleteImage = async (id, imageArray) => {
// console.log(dbModel, id, imageArray);
const { resourceId } = action;
const result = imageArray.splice(id, 1);
try {
const response = await axios.post(`${currentUrl}/product/delete-image`, {
model: model[resourceId],
images: imageArray,
id: params._id,
});
window.location.reload();
} catch (error) {
console.error("Error fetching data:", error);
}
};
for (const key in params) {
if (key.startsWith("images")) {
images.push(params[key]);
delete params[key]; // Remove individual "images" fields
}
}
params.images = images;
return (
<Card>
<CardContent>
{Object.entries(params).map(([key, value]) => (
<Stack direction="column" spacing={0.5} key={key} sx={{ mb: 3 }}>
<Typography
sx={{
fontFamily: "Roboto, sans-serif",
fontSize: "12px",
color: "rgb(137, 138, 154)",
}}
>
{key}:
</Typography>
{key?.includes("images") ? (
<ImageList
sx={{ width: 500, height: 450 }}
rowHeight={164}
cols={2}
>
{value?.map((item, id) => (
<ImageListItem key={id}>
<img
alt="testing"
loading="lazy"
src={`${currentUrl}/public/uploads/${item}`}
/>
<ImageListItemBar
sx={{
background:
"linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, " +
"rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)",
}}
position="top"
actionIcon={
<IconButton
sx={{ color: "white" }}
onClick={() => deleteImage(id, value)}
>
<DeleteOutlineIcon />
</IconButton>
}
actionPosition="right"
/>
</ImageListItem>
))}
</ImageList>
) : (
<Typography
sx={{
fontFamily: "Roboto, sans-serif",
fontSize: "14px",
}}
>
{detailValue(key) ?? value}
</Typography>
)}
</Stack>
))}
</CardContent>
</Card>
);
};
export default CustomDetailsPage;
My guess is that your imports load the entire MUI bundle which is very heavy. You could try to use tree-shaking guidelines from their docs: https://mui.com/material-ui/guides/minimizing-bundle-size/
Thanks @dziraf, its working now.