Add spinner when loading results

This will add a spinner to each repo row when the results for a
particular repo are loading. It will also disable the row to make clear
that it is loading and not clickable.
This commit is contained in:
Koen Vlaswinkel
2022-12-02 16:19:56 +01:00
parent 008d7b363f
commit 51d3a018de

View File

@@ -227,7 +227,7 @@ export const RepoRow = ({
[onSelectedChange, repository],
);
const disabled = !canExpand(status, downloadStatus);
const disabled = !canExpand(status, downloadStatus) || resultsLoading;
const expandableContentLoaded = isExpandableContentLoaded(
status,
downloadStatus,
@@ -247,11 +247,13 @@ export const RepoRow = ({
checked={selected}
disabled={!repository.id || !canSelect(status, downloadStatus)}
/>
{isExpanded ? (
{isExpanded && (
<ExpandCollapseCodicon name="chevron-down" label="Collapse" />
) : (
)}
{!isExpanded && !resultsLoading && (
<ExpandCollapseCodicon name="chevron-right" label="Expand" />
)}
{resultsLoading && <LoadingIcon label="Results are loading" />}
<VSCodeBadge>
{resultCount === undefined ? "-" : formatDecimal(resultCount)}
</VSCodeBadge>