diff --git a/scm-ui-components/packages/ui-components/src/repos/Diff.js b/scm-ui-components/packages/ui-components/src/repos/Diff.js
index 69f862fc0d..0b0b31a3d4 100644
--- a/scm-ui-components/packages/ui-components/src/repos/Diff.js
+++ b/scm-ui-components/packages/ui-components/src/repos/Diff.js
@@ -2,7 +2,6 @@
 import React from "react";
 import { Diff2Html } from "diff2html";
 
-
 type Props = {
   diff: string,
   sideBySide: boolean
diff --git a/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js b/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
new file mode 100644
index 0000000000..5f6330f0e5
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
@@ -0,0 +1,64 @@
+//@flow
+import React from "react";
+import { apiClient } from "../apiclient";
+import ErrorNotification from "../ErrorNotification";
+import Loading from "../Loading";
+import Diff from "./Diff";
+
+type Props = {
+  url: string,
+  sideBySide: boolean
+};
+
+type State = {
+  diff?: string,
+  loading: boolean,
+  error?: Error
+};
+
+class LoadingDiff extends React.Component<Props, State> {
+
+  static defaultProps = {
+    sideBySide: false
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentDidMount() {
+    const { url } = this.props;
+    apiClient
+      .get(url)
+      .then(response => response.text())
+      .then(text => {
+        this.setState({
+          loading: false,
+          diff: text
+        });
+      })
+      .catch(error => {
+        this.setState({
+          loading: false,
+          error
+        });
+      });
+  }
+
+  render() {
+    const { diff, loading, error } = this.state;
+    if (error) {
+      return <ErrorNotification error={error} />;
+    } else if (loading || !diff) {
+      return <Loading />;
+    } else {
+      return <Diff diff={diff} />;
+    }
+  }
+
+}
+
+export default LoadingDiff;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
index c9d86318f1..857ff8c827 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
@@ -1,29 +1,18 @@
 //@flow
 import React from "react";
 import type { Changeset } from "@scm-manager/ui-types";
-import { apiClient } from "../../apiclient";
-import ErrorNotification from "../../ErrorNotification";
-import Loading from "../../Loading";
-import Diff from "../Diff";
+import LoadingDiff from "../LoadingDiff";
+import Notification from "../../Notification";
+import {translate} from "react-i18next";
 
 type Props = {
-  changeset: Changeset
+  changeset: Changeset,
+
+  // context props
+  t: string => string
 };
 
-type State = {
-  diff?: string,
-  loading: boolean,
-  error?: Error
-};
-
-class ChangesetDiff extends React.Component<Props, State> {
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      loading: false
-    };
-  }
+class ChangesetDiff extends React.Component<Props> {
 
   isDiffSupported(changeset: Changeset) {
     return !!changeset._links.diff;
@@ -33,51 +22,16 @@ class ChangesetDiff extends React.Component<Props, State> {
     return changeset._links.diff.href + "?format=GIT";
   }
 
-  loadDiff(changeset: Changeset) {
-    this.setState({
-      loading: true
-    });
-    const url = this.createUrl(changeset);
-    apiClient
-      .get(url)
-      .then(response => response.text())
-      .then(text => {
-        this.setState({
-          loading: false,
-          diff: text
-        });
-      })
-      .catch(error => {
-        this.setState({
-          loading: false,
-          error
-        });
-      });
-  }
-
-  componentDidMount() {
-    const { changeset } = this.props;
-    if (!this.isDiffSupported(changeset)) {
-      this.setState({
-        error: new Error("diff is not supported")
-      });
-    } else {
-      this.loadDiff(changeset);
-    }
-  }
-
-
   render() {
-    const { diff, loading, error } = this.state;
-    if (error) {
-      return <ErrorNotification error={error} />;
-    } else if (loading || !diff) {
-      return <Loading />;
+    const { changeset, t } = this.props;
+    if (!this.isDiffSupported(changeset)) {
+      return <Notification type="danger">{t("changesets.diff.not-supported")}</Notification>;
     } else {
-      return <Diff diff={diff} />;
+      const url = this.createUrl(changeset);
+      return <LoadingDiff url={url} />;
     }
   }
 
 }
 
-export default ChangesetDiff;
+export default translate("repos")(ChangesetDiff);
diff --git a/scm-ui-components/packages/ui-components/src/repos/index.js b/scm-ui-components/packages/ui-components/src/repos/index.js
index cbecded267..9ebd1e9c55 100644
--- a/scm-ui-components/packages/ui-components/src/repos/index.js
+++ b/scm-ui-components/packages/ui-components/src/repos/index.js
@@ -2,3 +2,4 @@
 
 export * from "./changesets";
 export { default as Diff } from "./Diff";
+export { default as LoadingDiff } from "./LoadingDiff";
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index 8296b46907..d6cdaa1d8d 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -66,6 +66,9 @@
     }
   },
   "changesets": {
+    "diff": {
+      "not-supported": "Diff of changesets is not supported by the type of repository"
+    },
     "error-title": "Error",
     "error-subtitle": "Could not fetch changesets",
     "changeset": {