fix race condition in annotate view

scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx

@@ -33,37 +33,35 @@ type Props = {
 };
 
 const AnnotateView: FC<Props> = ({ file, repository }) => {
-  const [annotation, setAnnotation] = useState<AnnotatedSource>(undefined);
-  const [error, setError] = useState<Error | undefined>(undefined);
+  const [annotation, setAnnotation] = useState<AnnotatedSource | undefined>(undefined);
   const [language, setLanguage] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    getContentType(file._links.self.href)
-      .then(result => {
-        setLanguage(result.language);
-      })
-      .catch(error => {
-        setError(error);
-      });
+    const languagePromise = getContentType((file._links.self as Link).href).then(result =>
+      setLanguage(result.language)
+    );
 
-    apiClient
+    const apiClientPromise = apiClient
       .get((file._links.annotate as Link).href)
       .then(response => response.json())
-      .then(content => {
-        setAnnotation(content);
-      })
-      .catch(error => {
-        setError(error);
-      });
+      .then(setAnnotation);
+
+    Promise.all([languagePromise, apiClientPromise])
+      .then(() => setLoading(false))
+      .catch(setError);
   }, [file]);
 
   if (error) {
     return <ErrorNotification error={error} />;
-  } else if (annotation && language) {
-    return <Annotate source={{ ...annotation, language }} repository={repository} />;
-  } else {
+  }
+
+  if (!annotation || loading) {
     return <Loading />;
   }
+
+  return <Annotate source={{ ...annotation, language }} repository={repository} />;
 };
 
 export default AnnotateView;

scm-ui/ui-webapp/src/repos/sources/containers/contentType.ts

@@ -24,18 +24,18 @@
 
 import { apiClient } from "@scm-manager/ui-components";
 
-export function getContentType(url: string) {
+export type ContentType = {
+  type : string;
+  language?: string;
+}
+
+export function getContentType(url: string) : Promise<ContentType> {
   return apiClient
     .head(url)
     .then(response => {
       return {
-        type: response.headers.get("Content-Type"),
-        language: response.headers.get("X-Programming-Language")
+        type: response.headers.get("Content-Type") || "application/octet-stream",
+        language: response.headers.get("X-Programming-Language") || undefined
       };
     })
-    .catch(err => {
-      return {
-        error: err
-      };
-    });
 }