+ {stateLoadable.state === "loading" && (
+
+
+
+
+ )}
+ {state && (
+
+ {commitChangesTreeNodeRenderer.itemRenderer({
+ fileCountsMap: state.fileCountsMap,
+ })}
+
+ )}
+ {selectedCommits.length > 1 && (
+
+ Showing diff for more than one commit is not currently
+ supported. Only the first selected commit is taken into
+ account.
+
+ }
+ >
+ }
+ >
+ {(props) => (
+
+
+ )}
+
+ );
+}
+
+function Delayed({ children }: { children: ReactNode }) {
+ const [waitedEnough, setWaitedEnough] = useState(false);
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setWaitedEnough(true);
+ }, DEFAULT_LOADING_DELAY_MS);
+ return () => clearTimeout(timer);
+ }, []);
+ if (waitedEnough) {
+ return <>{children};
+ }
+ return null;
+}
diff --git a/packages/example-app/src/VersionControl/VersionControlToolWindow/CommitChanges/commitChangesTreeNodeRenderer.tsx b/packages/example-app/src/VersionControl/VersionControlToolWindow/CommitChanges/commitChangesTreeNodeRenderer.tsx
new file mode 100644
index 00000000..65e46986
--- /dev/null
+++ b/packages/example-app/src/VersionControl/VersionControlToolWindow/CommitChanges/commitChangesTreeNodeRenderer.tsx
@@ -0,0 +1,47 @@
+import path from "path";
+import { HighlightedTextValue, ItemLayout } from "@intellij-platform/core";
+import React from "react";
+
+import {
+ createChangesTreeNodeRenderer,
+ formatFileCount,
+ NodeRenderer,
+ simpleGroupingRenderer,
+} from "../../Changes/ChangesTree/changesTreeNodeRenderers";
+import { RepositoryNode } from "../../Changes/ChangesTree/ChangeTreeNode";
+import { RepoColorIcon } from "../../Changes/StyledRepoColorSquare";
+import { shortenOid } from "../commit-utils";
+import {
+ CommitChangesTreeNode,
+ CommitParentChangeTreeNode,
+} from "./CommitsChangedFiles.state";
+
+const repoNodeRenderer: NodeRenderer-
+ {({ readCommitResult, repoPath }) => (
+
-
+ {/* Using context here due to rendering optimizations of collection API */}
+
+ {(refs) => ( + ++ )} +
+ )}
+
+ {`${shortenOid(oid)} ${commit.author.name} `}
+ committed {committerInfo}
+ )}
+
+
+ {/*TODO: collapsing and "Show more"*/}
+ In {containingRefs.size} branches: {[...containingRefs].join(", ")}
+
+
+ {isDetailsVisible ? (
+
+ } + {line} +