Comments (4)
Sorry, isn't this related to React Strictmode?
from ui.
The screenshot depicts the live version of the ui.shadcn.com also, trying pure radix avatar doesn't seem to have this effect of repeated calls
from ui.
Oh I see. Thought you were using it in your own app @0xdhrv
from ui.
When trying the pure radix avatar in next.js i still get the double fetch. But if you change the radix <AvatarPrimitive.Image />
to the <Image />
component from next.js then the issue resolves... This also seems to have a dramatic effect on performance due to the image optimization.
But anyway this is probably an issue with radix..
FYI. i have also tried to run the <AvatarPrimitive.Image asChild />
with the image component. I get the same issue..
Here is my Avatar component, not perfect.
"use client";
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { cn } from "@/lib/utils";
import Image from "next/image";
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
));
Avatar.displayName = AvatarPrimitive.Root.displayName;
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof Image>
>(({ className, src, alt, ...props }, ref) => (
<Image
src={src}
alt={alt}
{...props}
className={cn("aspect-square h-full w-full", className)}
/>
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800",
className
)}
{...props}
/>
));
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
export { Avatar, AvatarImage, AvatarFallback };
from ui.
Related Issues (20)
- [bug]: FormMessage does not display custom message HOT 2
- [bug]: the Checkbox docs page manual installation section has unspecified dependency HOT 1
- [bug]: Type Error in DropdownMenu Component: "checked" Property Assignment Issue HOT 1
- [bug]: Wrong gap in select filed when value overflows
- [feat]: Make data table column sticky or fixed
- ### Description
- Remove a query param on dialog close.
- [bug]: ScrollArea ref doesnt anchor to desire element
- [bug]: `MenubarSubTrigger` does not have a style for when it is disabled.
- [bug]: Breadcrumb resposive example has bugs HOT 2
- [bug]: `bun add` fails when running add components in a monorepo HOT 2
- [bug]: "edit in v0" button is layer above navigation bar in /blocks page HOT 1
- [bug]: Cannot Modify div with style="min-width:100%;display:table" in ScrollArea Component, Causes Overflow HOT 2
- [bug]: Form elements has id and label for attribute as (undefined)
- [bug]: Sheet has no style
- [bug]: text not visible in Light mode HOT 2
- [bug]: shadcn dialog with react hook forms and zod validation close button issue HOT 4
- [bug]: When FormDescription is not used there is an id still applied to aria-describedby causing Arc Toolkit errrors HOT 1
- [feat]: provide information about the integration of icon component HOT 2
- [bug]: Select component not scrolling inside Sheet component. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.