admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Favicons are being re-rendered on hover (#5849)

Browse Source 
### Description

Favicons are being re-rendered on hover

### Refs

#3523

### Demo


https://www.loom.com/share/e3944d940a014283af8c26baac1fed57?sid=e3e96a81-3a54-4969-8602-99c64bb3ffe7

Fixes #3523

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-twenty
2024-06-19 07:34:42 -04:00
committed by GitHub
parent 96da777107
commit 64b456912a
5 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-ui/src/display/avatar/components/Avatar.tsx
View File

@ -1,7 +1,8 @@
import { useState } from 'react';
import { isNonEmptyString, isUndefined } from '@sniptt/guards';
import clsx from 'clsx';
import { useRecoilState } from 'recoil';
import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
import { Nullable, stringToHslColor } from '@ui/utilities';
import styles from './Avatar.module.css';
@ -55,16 +56,20 @@ export const Avatar = ({
color,
backgroundColor,
}: AvatarProps) => {
const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
const [invalidAvatarUrls, setInvalidAvatarUrls] = useRecoilState(
invalidAvatarUrlsState,
);
const noAvatarUrl = !isNonEmptyString(avatarUrl);
const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
const showPlaceholder = noAvatarUrl || isInvalidAvatarUrl;
const showPlaceholder = noAvatarUrl || invalidAvatarUrls.includes(avatarUrl);
const handleImageError = () => {
setIsInvalidAvatarUrl(true);
if (isNonEmptyString(avatarUrl)) {
setInvalidAvatarUrls((prev) => [...prev, avatarUrl]);
}
};
const fixedColor = color ?? stringToHslColor(entityId ?? '', 75, 25);

6
packages/twenty-ui/src/display/avatar/components/states/isInvalidAvatarUrlState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil';
export const invalidAvatarUrlsState = atom<string[]>({
key: 'invalidAvatarUrlsState',
default: [],
});

1
packages/twenty-ui/src/display/index.ts
View File

@ -1,5 +1,6 @@
export * from './avatar/components/Avatar';
export * from './avatar/components/AvatarGroup';
export * from './avatar/components/states/isInvalidAvatarUrlState';
export * from './checkmark/components/AnimatedCheckmark';
export * from './checkmark/components/Checkmark';
export * from './chip/components/Chip';