[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task

1 files changed, 6 insertions, 1 deletions

diff --git a/web/source/settings/lib/form/form-with-data.jsx b/web/source/settings/lib/form/form-with-data.jsx
index a383af502..d23a238bf 100644
--- a/web/source/settings/lib/form/form-with-data.jsx
+++ b/web/source/settings/lib/form/form-with-data.jsx
@@ -19,13 +19,14 @@
 "use strict";
 
 const React = require("react");
+const { Error } = require("../../components/error");
 
 const Loading = require("../../components/loading");
 
 // Wrap Form component inside component that fires the RTK Query call,
 // so Form will only be rendered when data is available to generate form-fields for
 module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formProps }) {
-	const { data, isLoading } = dataQuery(queryArg);
+	const { data, isLoading, isError, error } = dataQuery(queryArg);
 
 	if (isLoading) {
 		return (
@@ -33,6 +34,10 @@ module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formP
 				<Loading />
 			</div>
 		);
+	} else if (isError) {
+		return (
+			<Error error={error} />
+		);
 	} else {
 		return <DataForm data={data} {...formProps} />;
 	}