We Keep Coding

Antd card loading is not working properly

I'm using antd card component to display the card and loading is not working, I gave the loading based on the api response, i got the correct response but the loading is not working for me.... if i set the loading value to true it is working fine but it is not working while i'm passing the data.
useEffect(() => {
let keys = [{ key: "get_search_records", loading: true }];
dispatch(
dynamicRequest(keys, get_search_records_query, {
searchString: state,
})
);
}, [state]);
I'm getting data and changing the loading here and it is working fine, the loading also changes perfectly but it is not reflecting in the card component
<Box>
<HStack marginLeft={10} space={20} flexWrap={'wrap'}>
{items?.map((item, index) => (
<VStack marginTop={"30px"} space={10} flexWrap={"wrap"}>
<Card
loading={loading}
hoverable
style={{ height: 430 ,width: 250, borderRadius: "10px", marginTop:30, marginBottom: 30 }}
cover={
<HStack>
<Box width={"50%"}>
<div class="card_div">
<div style={{marginTop:"5px"}}>
<Text color={"white"} alignItems="center" marginLeft={"17px"} marginTop={"7px"} >
Hot
</Text>
</div>
</div>
</Box>
<Box flexDirection="row-reverse" marginTop={"-30px"} marginRight={"10px"} padding={"5px"}>
<Typography.Link onClick={handleAddCart}>
<Tooltip className="tooltip-wishlist" color=" #3BB77E" title="Add to wishlist" placement="bottom">
<AiOutlineHeart size={"25px"}/>
</Tooltip>
</Typography.Link>
</Box>
</HStack>
}
>
<Box alignContent={"center"} height="170px">
{/* <AspectRatio w="100%" ratio={16/9}> */}
<Image
alt="Image"
src={item?.vendor_product?.product?.gallery?.[0]}
// width="90%"
preview={false}
/>
</Box>
<Box alignContent={"center"}>
<Text bold> </Text>
<VStack space={1.5}>
<Box height="130px">
<Text color={"#adadad"}>
{item.vendor_product.product.category.name}
</Text>
<Text onPress={handleClick} onMouseOver={mouseOver} onMouseOut={MouseOut} bold>{item.name} </Text>
<Rating count={item?.product_rating?.[0]?.rating}/>
<Text onPress={handleTextPress}>
By <span style={{ color: "#22c55e" }} onMouseOver={mouseOverVendor} onMouseOut={mouseOutVendor} >Theni FBO</span>
</Text>
</Box>
<HStack justifyContent="space-between">
{item.discount && (
<Text color="green.500">₹ {item.base_price}</Text>
)}
<Text strikeThrough color="green.500">
₹ {item.selling_price}
</Text>
<Button onClick={addCart} className="cart-btn" icon={<BsCart3 />}>
Add
</Button>
</HStack>
</VStack>
</Box>
</Card>
</VStack>
))}
</HStack>)}
</Box>
this is my antd card code... anyone please tell me why the loading is not working properly.

How can I select an emoji without raising my hand in React native?

ı'm trying to do something like the LinkedIn rating system.
In LinkedIn, you can choose emojis without raising your hand when you press the like button.
I'm trying to do the same in my own app.
https://i.stack.imgur.com/rkW4c.png
however, when I try to select without raising my hand, the page scrolls up and down.
https://i.stack.imgur.com/8r9UN.png
Comment Reaction page code is here:
<GestureHandlerRootView style={styles.root}>
<View style={styles.container}>
<View style={styles.root}
>
<AnimatePresence>
{show && (
<PanGestureHandler
onGestureEvent={onGesture}
onEnded={gestureEnded}
>
<MotiView
style={styles.MotiViewContainer}
from={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<MotiView
style={styles.floatBox}
from={{ translateY: 40, opacity: 1 }}
animate={{ translateY: 0, opacity: 1 }}
exit={{ translateY: 40, opacity: 0 }}
transition={{
duration: 400,
}}
>
<View style={styles.emojiBox}>
{Emojis.map((item, index) => (
<EmojiItem
onPress={() => emojiPressHandler(item.id)}
key={item.title}
data={item}
index={index}
scaled={current == index}
/>
))}
</View>
</MotiView>
</MotiView>
</PanGestureHandler>
)}
</AnimatePresence>
{show && <Backdrop onPress={onClose} />}
{/* Button */}
<TouchableOpacity
hitSlop={{ top: 3, bottom: 15, right: 8 }}
activeOpacity={0.7}
onLongPress={handleOnLongPressButton}
onPress={handleOnPressButton}
delayLongPress={100}
>
<View style={styles.customButtonContainer}
>
<Text style={styles.blueText}>{i18n.t("Common.Like")}</Text>
</View>
</TouchableOpacity>
</View>
</View>
</GestureHandlerRootView>
Can your help me?

Skeleton-Avatar and ImageButton in MUI React are forced to oval background shapes

When using mui Stack I get weird side effect of geting all the background shapes of Skeleton Avatar and background area smeared to oval|elipsoid shapes. I tried setting equal width and height for Avatar but id does not help.
How can I fix it throguh sx mui component property or css?
code fragment
<Box
noValidate autoComplete="off"
sx={{ marginLeft: '15%','& .MuiTextField-root': { m: 2, width: '25ch' }}}>
<div>
<form onSubmit={onSubmit} >
{formFields.map((form, index) => {
return (
<Fade in={true} sx = {{width: '95%'}} {...{ timeout: 500 }}>
<Stack direction="row" borderRadius="0" spacing={2} key={index} style ={{marginLeft: '-50px', }}>
{form.img? <Avatar alt="release img" src={form.img} sx={{ width: 56, height: 56 }} /> : <Skeleton animation={false} variant ='circular'> <Avatar sx={{ width: 56, height: 56}} /> </Skeleton>}
<TextField {/* ... */}/>
<IconButton onClick={() => removeFields(index)}><DeleteIcon /</IconButton>
</Stack>
</Fade>
)
})}
</form>
<IconButton onClick={addFields} color={'warning'}> <AddCircleOutlineOutlinedIcon /></IconButton>
<br></br><br></br>
<Button onClick={onSubmit} color={'warning'} variant="contained" endIcon= {<SendIcon/>} > Search links </Button>

Normally, the default value of align-items for flex items will be stretch, that's why you see your icon is stretched in the cross axis
The solution is simple, set alignItems prop in Stack to a different value rather than normal/stretch. Here I use center
<Stack
direction="row"
borderRadius="0"
spacing={2}
alignItems="center" // this line
style={{ marginLeft: "-50px" }}
>
Demo
References
CSS align-items

Menu content display issue

I need some help pls. I created a menu with section and courses; but the section-labels are repeating.
I would like all courses with the same section to be displayed on a single section lable.
Please see code and screenshot.
<Menu
defaultSelectedKeys={[clicked]}
inlineCollapsed={collapsed}
style={{ height: "100vh", overflow: "scroll" }}
mode="inline"
>
{course.lessons.map((lesson, index) => (
<SubMenu
title={lesson.section}>
<ItemGroup
key={index}>
<Item
onClick={() => setClicked(index)}
key={index}
icon={<Avatar>{index + 1}</Avatar>}
>
{lesson.title.substring(0, 30)}
{" "}
{completedLessons.includes(lesson._id) ? (
<CheckCircleFilled
className="float-end text-primary ml-2"
style={{ marginTop: "13px" }}
/>
) : (
<MinusCircleFilled
className="float-end text-danger ml-2"
style={{ marginTop: "13px" }}
/>
)}
</Item>
</ItemGroup>
</SubMenu>
))}
</Menu>
Screenshot of the Menu

You need to group the lessons by section, then you must iterate over each lessons in the section.
Here is a possible solution :
// group lessons by section into an object {sectionName: [lesson1, lesson2]}
const lessonsBySection = course.lessons.reduce(function(obj, lesson) {
(obj[lesson.section] = obj[lesson.section] || []).push(lesson);
return obj;
}, {});
// get all the sections (sorted alphabetically)
const sections = Object.keys(lessonsBySection).sort();
return (
<Menu ...>
{sections.map((section, sectionIndex) => (
<SubMenu key={section} title={section}>
<ItemGroup>
{lessonsBySection[section].map((lesson, lessonIndex) => (
<Item
key={lesson._id}
onClick={() => setClicked(
courses.lessons.findIndex(l => l._id === lesson._id)
)}
icon={<Avatar>{lessonIndex + 1}</Avatar>}
>
...
</Item>
))}
</ItemGroup>
</SubMenu>
))}
</Menu>
)

How to fix button to be interacted with, in carousel?

When I try to import a layer/button onto one of these cards it does not allow it to be clicked or interacted with. I believe the problem is with the carousel. What is a way I can fix this? The "CenterLayer" is supposed to act as a button and is the one I am having problems with. When I put this code the layer appears on the card as a footer but it's not allowed to be clicked. Is there anyone that can help me with this, please?
import React from "react";
import {
Card,
CardHeader,
CardBody,
CardFooter,
Box,
Image,
Heading,
Carousel,
Grommet,
Calendar,
Text,
} from "grommet";
import {CenterLayer} from "./EventsButton";
import { MainFooter } from "../Footer/Footer";
const Card0 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>The Stranahan High School Graduation</CardBody>
<Box direction="row" round gap="xlarge">
<CardFooter>
3/25/2021
</CardFooter>
<CardFooter>
<CenterLayer />
</CardFooter>
</Box>
</Card>
);
const Card1 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>Card1 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Card2 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />{" "}
</Box>
</CardHeader>
<CardBody>Card2 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Events = () => (
<Grommet>
<Heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",
top: "large",}}>Upcoming Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>
<Heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",
top: "large",}}>Past Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>
<Box direction="row" pad="xlarge" round gap="xlarge">
<Box height="medium" width="medium" margin={{left: "xlarge"}}>
<Calendar fill daysOfWeek />
</Box>
<Box margin={{left: "xlarge", top:"large"}}>
<Card background={'orange'} >
<CardBody height="medium" width="medium" margin={{right: "medium", bottom: "medium", left: "medium", top: "medium"}}>
<Text>At SEEF we take every opportunity to help the Stranahan community. We hope that our impact will lead others to do the same.</Text>
</CardBody>
</Card>
</Box>
</Box>
< MainFooter />
</Grommet>
);
export default Events
import React from 'react';
import { Add } from 'grommet-icons';
import { Box, Button, Grommet, Heading, Layer, Select, Text } from 'grommet';
import { grommet } from 'grommet/themes';
export const CenterLayer = () => {
const [open, setOpen] = React.useState();
const onOpen = () => setOpen(true);
const onClose = () => setOpen(undefined);
return (
<Grommet theme={grommet} >
<Box fill align="center" justify="center">
<Button
icon={<Add />}
label={
<Text>
<strong>More Information</strong>
</Text>
}
onClick={onOpen}
plain
/>
</Box>
{open && (
<Layer position="center" onClickOutside={onClose} onEsc={onClose}>
<Box pad="medium" gap="small" width="medium">
<Heading level={3} margin="none">
The Stranahan High School Graduation
</Heading>
<Text>This event will be taken place at City Hall in Fort Lauderdale</Text>
<Text>This event will be taken place on 3/25/2021 at 3:00PM</Text>
<Box
as="footer"
gap="small"
direction="row"
align="center"
justify="end"
pad={{ top: 'medium', bottom: 'small' }}
>
<Button
label={
<Text color="white">
<strong>Close</strong>
</Text>
}
onClick={onClose}
primary
color="status-critical"
/>
</Box>
</Box>
</Layer>
)}
</Grommet>
);
};
CenterLayer.storyName = 'Center';
CenterLayer.parameters = {
chromatic: { disable: true },
};
export default {
title: 'EventsButton',
};

Carousel is an interactive element, i.e. it has its own focus and navigation behavior, and for UX & accessibility reasons you shouldn't place nested interactive elements inside of each other, hence I'd try to avoid a button inside of a card, inside of a Carousel.
That being said, the button you've placed in the card is placed 'behind' the Carousel, so moving up its z-index would solve the problem.
Add this style to a Card and it should do trick
<Card style={{ zIndex: "100" }} ... >
I chose 100 as a random number, feel free to make it smaller according to your app behavior.