mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-06 20:15:17 +02:00
refactor: Update indexing status display in connector components
- Replaced the previous "Syncing..." text with a more concise "Syncing" in various components to enhance clarity. - Adjusted the UI to maintain consistent styling and improve user experience during indexing operations. - Simplified conditional rendering for indexing status across ConnectorCard, ActiveConnectorsTab, and ConnectorAccountsListView components.
This commit is contained in:
parent
f250fa177a
commit
0e0aec13f3
3 changed files with 21 additions and 30 deletions
|
|
@ -61,20 +61,6 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
|
||||||
|
|
||||||
// Determine the status content to display
|
// Determine the status content to display
|
||||||
const getStatusContent = () => {
|
const getStatusContent = () => {
|
||||||
if (isIndexing) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2 w-full max-w-[200px]">
|
|
||||||
<span className="text-[11px] text-primary font-medium whitespace-nowrap">
|
|
||||||
Syncing...
|
|
||||||
</span>
|
|
||||||
{/* Indeterminate progress bar with animation */}
|
|
||||||
<div className="relative flex-1 h-1 overflow-hidden rounded-full bg-primary/20">
|
|
||||||
<div className="absolute h-full bg-primary rounded-full animate-progress-indeterminate" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isConnected) {
|
if (isConnected) {
|
||||||
// Don't show last indexed in overview tabs - only show in accounts list view
|
// Don't show last indexed in overview tabs - only show in accounts list view
|
||||||
return null;
|
return null;
|
||||||
|
|
@ -120,7 +106,10 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isIndexing ? (
|
{isIndexing ? (
|
||||||
<div className="text-[10px] text-muted-foreground mt-1">{getStatusContent()}</div>
|
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
||||||
|
<Loader2 className="size-3 animate-spin" />
|
||||||
|
Syncing
|
||||||
|
</p>
|
||||||
) : isConnected ? (
|
) : isConnected ? (
|
||||||
<p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1.5">
|
<p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1.5">
|
||||||
<span>{formatDocumentCount(documentCount)}</span>
|
<span>{formatDocumentCount(documentCount)}</span>
|
||||||
|
|
|
||||||
|
|
@ -192,19 +192,20 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-[14px] font-semibold leading-tight truncate">{title}</p>
|
<p className="text-[14px] font-semibold leading-tight truncate">{title}</p>
|
||||||
{isAnyIndexing && (
|
{isAnyIndexing ? (
|
||||||
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
||||||
<Loader2 className="size-3 animate-spin" />
|
<Loader2 className="size-3 animate-spin" />
|
||||||
Indexing...
|
Syncing
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1.5">
|
||||||
|
<span>{formatDocumentCount(documentCount)}</span>
|
||||||
|
<span className="text-muted-foreground/50">•</span>
|
||||||
|
<span>
|
||||||
|
{accountCount} {accountCount === 1 ? "Account" : "Accounts"}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1.5">
|
|
||||||
<span>{formatDocumentCount(documentCount)}</span>
|
|
||||||
<span className="text-muted-foreground/50">•</span>
|
|
||||||
<span>
|
|
||||||
{accountCount} {accountCount === 1 ? "Account" : "Accounts"}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
|
|
@ -250,15 +251,16 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
|
||||||
<p className="text-[14px] font-semibold leading-tight truncate">
|
<p className="text-[14px] font-semibold leading-tight truncate">
|
||||||
{connector.name}
|
{connector.name}
|
||||||
</p>
|
</p>
|
||||||
{isIndexing && (
|
{isIndexing ? (
|
||||||
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
||||||
<Loader2 className="size-3 animate-spin" />
|
<Loader2 className="size-3 animate-spin" />
|
||||||
Syncing...
|
Syncing
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-[10px] text-muted-foreground mt-1">
|
||||||
|
{formatDocumentCount(documentCount)}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<p className="text-[10px] text-muted-foreground mt-1">
|
|
||||||
{formatDocumentCount(documentCount)}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
|
|
|
||||||
|
|
@ -162,7 +162,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
|
||||||
{isIndexing ? (
|
{isIndexing ? (
|
||||||
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
||||||
<Loader2 className="size-3 animate-spin" />
|
<Loader2 className="size-3 animate-spin" />
|
||||||
Syncing...
|
Syncing
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-[10px] text-muted-foreground mt-1 whitespace-nowrap truncate">
|
<p className="text-[10px] text-muted-foreground mt-1 whitespace-nowrap truncate">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue