Fix location eternally loading when not set

packages/concordia-app/public/locales/en/translation.json

@@ -8,6 +8,7 @@
   "post.form.subject.field.placeholder": "Subject",
   "post.list.row.post.id": "#{{id}}",
   "profile.general.tab.address.row.title": "Account address:",
+  "profile.general.tab.location.row.not.set": "Not set",
   "profile.general.tab.location.row.title": "Location:",
   "profile.general.tab.number.of.posts.row.title": "Number of posts:",
   "profile.general.tab.number.of.topics.row.title": "Number of topics created:",

packages/concordia-app/src/assets/css/index.css

@@ -10,3 +10,8 @@ body.app {
 .i18next-newlines {
     white-space: pre-line !important;
 }
+
+.text-secondary {
+    color: gray;
+    font-style: italic;
+}

packages/concordia-app/src/views/Profile/GeneralTab/index.jsx

@@ -79,6 +79,17 @@ const GeneralTab = (props) => {
         />
     )), [profileMeta]);
 
+  const userLocation = useMemo(() => {
+    if (profileMeta === null) {
+      return (
+          <Placeholder><Placeholder.Line length="medium" /></Placeholder>
+      );
+    } if (profileMeta[USER_LOCATION] === undefined) {
+      return <span className="text-secondary">{t('profile.general.tab.location.row.not.set')}</span>;
+    }
+    return profileMeta[USER_LOCATION];
+  }, [profileMeta, t]);
+
   return useMemo(() => (
       <Table basic="very" singleLine>
           <Table.Body>
@@ -126,9 +137,7 @@ const GeneralTab = (props) => {
               <Table.Row>
                   <Table.Cell><strong>{t('profile.general.tab.location.row.title')}</strong></Table.Cell>
                   <Table.Cell>
-                      {profileMeta !== null && profileMeta[USER_LOCATION]
-                        ? profileMeta[USER_LOCATION]
-                        : <Placeholder><Placeholder.Line length="medium" /></Placeholder>}
+                      {userLocation}
                   </Table.Cell>
               </Table.Row>
               <Table.Row>