Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 19:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(Chat.jsx): Improve Message Creation UX by Eliminating Screen Flicker (#577)

Browse source 
* fix(Chat.jsx): conversation no longer navigates upon message creation, which would cause re-render/flicker

* chore(.gitignore): ignore storageState.json in all directories
chore(storageState.json): delete e2e/storageState.json file

* test(e2e): fix old tests with new playwright setup & add helper script for codegen

* fix(Conversation.jsx): add data-testid attribute to <a> element
test(messages.spec.js): add test for expected navigation after receiving message
test(messages.spec.js): add test for page navigations

* chore(Plugin.jsx): import Spinner from '~/components' instead of '../svg/Spinner'
chore(index.jsx): import Spinner from '~/components' instead of '../svg/Spinner'
chore(Spinner.jsx): change classProp prop to className prop in Spinner component
feat(index.ts): export Spinner component from './Spinner'
This commit is contained in:
Danny Avila 2023-07-03 16:00:04 -04:00 • committed by GitHub
parent 6b843429c5
commit 88683b9cc5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 108 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Conversations/Conversation.jsx
View file

@ -96,7 +96,7 @@ export default function Conversation({ conversation, retainView }) {
}
return (
<a onClick={() => clickHandler()} {...aProps}>
<a data-testid="convo-item" onClick={() => clickHandler()} {...aProps}>
<ConvoIcon />
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
{renaming === true ? (

4
client/src/components/Messages/Plugin.jsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react';
import Spinner from '../svg/Spinner';
import { Spinner } from '~/components';
import CodeBlock from './Content/CodeBlock.jsx';
import { Disclosure } from '@headlessui/react';
import { ChevronDownIcon } from 'lucide-react';
@ -62,7 +62,7 @@ export default function Plugin({ plugin }) {
<div>{generateStatus()}</div>
</div>
</div>
{loading && <Spinner classProp="ml-1" />}
{loading && <Spinner className="ml-1" />}
<Disclosure.Button className="ml-12 flex items-center gap-2">
<ChevronDownIcon className={cn(open ? 'rotate-180 transform' : '', 'h-4 w-4')} />
</Disclosure.Button>

6
client/src/components/Messages/index.jsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState, useRef, useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import Spinner from '../svg/Spinner';
import { Spinner } from '~/components';
import throttle from 'lodash/throttle';
import { CSSTransition } from 'react-transition-group';
import ScrollToBottom from './ScrollToBottom';
@ -89,7 +89,9 @@ export default function Messages({ isSearchView = false }) {
<div className="dark:gpt-dark-gray flex h-auto flex-col items-center text-sm">
<MessageHeader isSearchView={isSearchView} />
{_messagesTree === null ? (
<Spinner />
<body className="h-screen flex items-center justify-center">
<Spinner />
</body>
) : _messagesTree?.length == 0 && isSearchView ? (
<div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300">
Nothing found

4
client/src/components/svg/Spinner.jsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { cn } from '~/utils/';
export default function Spinner({ classProp = 'm-auto' }) {
export default function Spinner({ className = 'm-auto' }) {
return (
<svg
stroke="currentColor"
@ -10,7 +10,7 @@ export default function Spinner({ classProp = 'm-auto' }) {
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className={cn(classProp, 'animate-spin text-center')}
className={cn(className, 'animate-spin text-center')}
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"

1
client/src/components/svg/index.ts
View file

@ -2,4 +2,5 @@ export { default as Plugin } from './Plugin';
export { default as GPTIcon } from './GPTIcon';
export { default as BingIcon } from './BingIcon';
export { default as CogIcon } from './CogIcon';
export { default as Spinner } from './Spinner';
export { default as MessagesSquared } from './MessagesSquared';