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)
- [blocks]: Filesystem dashboard
- [Bug]: broken text blocks when having light theme
- [blocks]: Landing pages
- Adding a 'loading' prop for buttons HOT 2
- [blocks]: Kanban Board with Todo List view
- [blocks]: Chat Interface frontend with support for FastAPI or Vercel AI SDK
- [blocks]: Post Card
- [blocks]: Time Picker and Time Range Picker
- [blocks]: Grid block like Monday.com and Airtable
- [Bug]: cmdk version 1.0.0 broken in Astro app HOT 5
- [blocks]: Blocks to the Examples section of the shadcn-ui site
- [feat]: Links that look like button HOT 2
- [Bug]: doc site code block light theme color missing
- [Bug]: Overlay issue in new dashboard block HOT 2
- [blocks]: charts
- [blocks]: Tag Input and File Upload
- [blocks]: User dashboard
- [blocks]: apoint of sale page where products are added to the sale point
- [blocks]: a dashboard for students
- [Bug]: Type error in Dropdown Menu and Menubar 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.