Skip to content

Commit 8c7847a

Browse files
arnautov-antonarnautov-anton
committed
Replace loading icon/adjust LoadingIndicator component
1 parent d6c08ca commit 8c7847a

8 files changed

Lines changed: 44 additions & 91 deletions

File tree

‎src/components/Attachment/ModalGallery.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const ThumbnailButton = ({
197197
className='str-chat__modal-gallery__image-loading-overlay'
198198
data-testid='str-chat__modal-gallery__image-loading-overlay'
199199
>
200-
<LoadingIndicator size={32} />
200+
<LoadingIndicator />
201201
</div>
202202
)}
203203
{showRetryIndicator && (

‎src/components/Attachment/styling/ModalGallery.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,13 @@
149149
background-size: 200% 100%;
150150
animation: str-chat__modal-gallery-loading-shimmer 1.2s linear infinite;
151151
pointer-events: none;
152-
}
153152

154-
.str-chat__modal-gallery__image-loading-overlay .str-chat__loading-indicator {
155-
position: relative;
156-
z-index: 1;
153+
.str-chat__loading-indicator {
154+
position: relative;
155+
z-index: 1;
156+
width: var(--icon-size-lg);
157+
height: var(--icon-size-lg);
158+
}
157159
}
158160

159161
.str-chat__modal-gallery__image-retry-indicator {

‎src/components/Icons/createIcon.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,14 @@ function toIconClass(name: string) {
1515
);
1616
}
1717

18-
export function createIcon(name: string, content: ReactNode) {
18+
export function createIcon(
19+
name: string,
20+
content: ReactNode,
21+
defaultProps?: ComponentProps<'svg'>,
22+
) {
1923
const iconClass = toIconClass(name);
2024
const Icon = ({ className, ...props }: ComponentProps<'svg'>) => (
21-
<BaseIcon {...props} className={clsx(iconClass, className)}>
25+
<BaseIcon {...defaultProps} {...props} className={clsx(iconClass, className)}>
2226
{content}
2327
</BaseIcon>
2428
);

‎src/components/Icons/icons.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1060,3 +1060,26 @@ export const IconArchive = createIcon(
10601060
strokeWidth='1.5'
10611061
/>,
10621062
);
1063+
1064+
export const IconLoadingCircle = createIcon(
1065+
'IconLoadingCircle',
1066+
<>
1067+
<path
1068+
d='M17.5 10C17.5 14.1422 14.1422 17.5 10 17.5C5.85787 17.5 2.5 14.1422 2.5 10C2.5 5.85787 5.85787 2.5 10 2.5C14.1422 2.5 17.5 5.85787 17.5 10Z'
1069+
fill='none'
1070+
opacity='0.25'
1071+
stroke='currentColor'
1072+
strokeWidth='1.5'
1073+
/>
1074+
<path
1075+
d='M17.4542 10.8333C17.0698 14.3096 14.3096 17.0698 10.8333 17.4542'
1076+
fill='none'
1077+
stroke='currentColor'
1078+
strokeLinecap='round'
1079+
strokeWidth='1.5'
1080+
/>
1081+
</>,
1082+
{
1083+
viewBox: '0 0 20 20',
1084+
},
1085+
);

‎src/components/Loading/LoadingIndicator.tsx‎

Lines changed: 6 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,8 @@
1-
import React from 'react';
1+
import React, { type ComponentProps } from 'react';
2+
import { IconLoadingCircle } from '../Icons';
23

3-
// FIXME: remove color and size props and let the loading indicator to be styled via CSS
4-
export type LoadingIndicatorProps = {
5-
/** Set the color of the LoadingIndicator */
6-
color?: string;
7-
/** The size of the loading icon, @default 15px */
8-
size?: number;
9-
};
4+
export type LoadingIndicatorProps = ComponentProps<typeof IconLoadingCircle>;
105

11-
const UnMemoizedLoadingIndicator = (props: LoadingIndicatorProps) => {
12-
const { color, size = 15 } = props;
13-
const baseColor = 'var(--str-chat__loading-indicator-base-color)';
14-
const indicatorColor = color ?? 'var(--str-chat__loading-indicator-color)';
15-
16-
return (
17-
<div
18-
className={`str-chat__loading-indicator`}
19-
data-testid='loading-indicator-wrapper'
20-
style={{ height: size, width: size }}
21-
>
22-
<svg
23-
height={size}
24-
viewBox={`0 0 30 30`}
25-
width={size}
26-
xmlns='http://www.w3.org/2000/svg'
27-
>
28-
<defs>
29-
<linearGradient id='a' x1='50%' x2='50%' y1='0%' y2='100%'>
30-
<stop
31-
offset='0%'
32-
stopColor={baseColor}
33-
stopOpacity='0'
34-
style={{ stopColor: baseColor }}
35-
/>
36-
<stop
37-
data-testid='loading-indicator-circle'
38-
offset='100%'
39-
stopColor={indicatorColor}
40-
stopOpacity='1'
41-
style={{ stopColor: indicatorColor }}
42-
/>
43-
</linearGradient>
44-
</defs>
45-
<path
46-
d='M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z'
47-
fill='url(#a)'
48-
fillRule='evenodd'
49-
/>
50-
</svg>
51-
</div>
52-
);
53-
};
54-
55-
/**
56-
* Simple loading spinner
57-
*/
58-
export const LoadingIndicator = React.memo(
59-
UnMemoizedLoadingIndicator,
60-
(prevProps, nextProps) =>
61-
prevProps.color === nextProps.color && prevProps.size === nextProps.size,
62-
) as typeof UnMemoizedLoadingIndicator;
6+
export const LoadingIndicator = (props: LoadingIndicatorProps) => (
7+
<IconLoadingCircle {...props} className='str-chat__loading-indicator' />
8+
);

‎src/components/Loading/styling/LoadingIndicator.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,6 @@
1-
.str-chat {
2-
/* The size of the loading indicator, only available in Angular v5+ */
3-
--str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 15);
4-
/* The transparent edge of the loading indicator gradient */
5-
--str-chat__loading-indicator-base-color: var(--skeleton-loading-base);
6-
/* The visible shimmer color of the loading indicator */
7-
--str-chat__loading-indicator-color: var(--skeleton-loading-highlight);
8-
}
9-
101
.str-chat__loading-indicator {
11-
display: flex;
12-
align-items: center;
13-
justify-content: center;
142
animation: rotate 1s linear infinite;
153

16-
svg {
17-
width: var(--str-chat__loading-indicator-size);
18-
height: var(--str-chat__loading-indicator-size);
19-
}
20-
214
@-webkit-keyframes rotate {
225
from {
236
-webkit-transform: rotate(0deg);
@@ -50,8 +33,3 @@
5033
}
5134
}
5235
}
53-
54-
.str-chat__loading-indicator-placeholder {
55-
width: var(--str-chat__loading-indicator-size);
56-
height: var(--str-chat__loading-indicator-size);
57-
}

‎src/components/MessageList/MessageList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
272272
isLoading={props.loadingMore}
273273
loader={
274274
<div className='str-chat__list__loading' key='loading-indicator'>
275-
{props.loadingMore && <LoadingIndicator size={20} />}
275+
{props.loadingMore && <LoadingIndicator />}
276276
</div>
277277
}
278278
loadNextPage={loadMoreNewer}

‎src/components/MessageList/VirtualizedMessageListComponents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const Header = ({ context }: CommonVirtuosoComponentProps) => {
7575
{context?.head}
7676
{context?.loadingMore && LoadingIndicator && (
7777
<div className='str-chat__virtual-list__loading'>
78-
<LoadingIndicator size={20} />
78+
<LoadingIndicator />
7979
</div>
8080
)}
8181
</>

0 commit comments

Comments
 (0)