@lobehub/chat 0.40.4 → 0.40.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
# Changelog
|
|
4
4
|
|
|
5
|
+
### [Version 0.40.5](https://github.com/lobehub/lobe-chat/compare/v0.40.4...v0.40.5)
|
|
6
|
+
|
|
7
|
+
<sup>Released on **2023-08-10**</sup>
|
|
8
|
+
|
|
9
|
+
#### 💄 Styles
|
|
10
|
+
|
|
11
|
+
- **misc**: 增加未初始化的 loading 态.
|
|
12
|
+
|
|
13
|
+
<br/>
|
|
14
|
+
|
|
15
|
+
<details>
|
|
16
|
+
<summary><kbd>Improvements and Fixes</kbd></summary>
|
|
17
|
+
|
|
18
|
+
#### Styles
|
|
19
|
+
|
|
20
|
+
- **misc**: 增加未初始化的 loading 态 ([dcb7c07](https://github.com/lobehub/lobe-chat/commit/dcb7c07))
|
|
21
|
+
|
|
22
|
+
</details>
|
|
23
|
+
|
|
24
|
+
<div align="right">
|
|
25
|
+
|
|
26
|
+
[](#readme-top)
|
|
27
|
+
|
|
28
|
+
</div>
|
|
29
|
+
|
|
5
30
|
### [Version 0.40.4](https://github.com/lobehub/lobe-chat/compare/v0.40.3...v0.40.4)
|
|
6
31
|
|
|
7
32
|
<sup>Released on **2023-08-10**</sup>
|
package/package.json
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Skeleton } from 'antd';
|
|
2
|
+
import { createStyles } from 'antd-style';
|
|
3
|
+
import { Flexbox } from 'react-layout-kit';
|
|
4
|
+
|
|
5
|
+
const useStyles = createStyles(({ css }) => ({
|
|
6
|
+
avatar: css``,
|
|
7
|
+
paragraph: css`
|
|
8
|
+
height: 12px !important;
|
|
9
|
+
margin-top: 12px !important;
|
|
10
|
+
|
|
11
|
+
> li {
|
|
12
|
+
height: 12px !important;
|
|
13
|
+
}
|
|
14
|
+
`,
|
|
15
|
+
title: css`
|
|
16
|
+
height: 14px !important;
|
|
17
|
+
margin-top: 4px !important;
|
|
18
|
+
margin-bottom: 12px !important;
|
|
19
|
+
|
|
20
|
+
> li {
|
|
21
|
+
height: 14px !important;
|
|
22
|
+
}
|
|
23
|
+
`,
|
|
24
|
+
}));
|
|
25
|
+
|
|
26
|
+
// 从 3~10 随机取一个整数
|
|
27
|
+
|
|
28
|
+
const SkeletonItem = () => {
|
|
29
|
+
const { styles } = useStyles();
|
|
30
|
+
|
|
31
|
+
const list = Array.from({ length: 4 }).fill('');
|
|
32
|
+
return (
|
|
33
|
+
<Flexbox gap={8} paddingInline={16}>
|
|
34
|
+
{list.map((_, index) => (
|
|
35
|
+
<Skeleton
|
|
36
|
+
active
|
|
37
|
+
avatar
|
|
38
|
+
key={index}
|
|
39
|
+
paragraph={{ className: styles.paragraph, rows: 1 }}
|
|
40
|
+
round
|
|
41
|
+
title={{ className: styles.title }}
|
|
42
|
+
/>
|
|
43
|
+
))}
|
|
44
|
+
</Flexbox>
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
export default SkeletonItem;
|
|
@@ -1,20 +1,32 @@
|
|
|
1
1
|
import isEqual from 'fast-deep-equal';
|
|
2
2
|
import Link from 'next/link';
|
|
3
|
-
import { memo } from 'react';
|
|
3
|
+
import { memo, useEffect, useState } from 'react';
|
|
4
4
|
import { shallow } from 'zustand/shallow';
|
|
5
5
|
|
|
6
6
|
import { sessionSelectors, useSessionStore } from '@/store/session';
|
|
7
7
|
|
|
8
8
|
import SessionItem from './SessionItem';
|
|
9
|
+
import SkeletonItem from './SkeletonItem';
|
|
9
10
|
|
|
10
11
|
const SessionList = memo(() => {
|
|
12
|
+
const [isInit, setInit] = useState(false);
|
|
11
13
|
const list = useSessionStore((s) => sessionSelectors.sessionList(s), isEqual);
|
|
12
14
|
const [activeId, loading] = useSessionStore(
|
|
13
15
|
(s) => [s.activeId, s.autocompleteLoading.title],
|
|
14
16
|
shallow,
|
|
15
17
|
);
|
|
16
18
|
|
|
17
|
-
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const hasRehydrated = useSessionStore.persist.hasHydrated();
|
|
21
|
+
|
|
22
|
+
if (hasRehydrated) {
|
|
23
|
+
setInit(true);
|
|
24
|
+
}
|
|
25
|
+
}, []);
|
|
26
|
+
|
|
27
|
+
return !isInit ? (
|
|
28
|
+
<SkeletonItem />
|
|
29
|
+
) : (
|
|
18
30
|
<>
|
|
19
31
|
{list.map(({ id }) => (
|
|
20
32
|
<Link href={`/chat/${id}`} key={id}>
|