Add useLoading hook

app/soapbox/entity-store/hooks/useEntityRequest.ts

@@ -1,24 +1,15 @@
-import { useState } from 'react';
-
-import { useApi } from 'soapbox/hooks';
+import { useApi, useLoading } from 'soapbox/hooks';
 
 import { EntityRequest } from './types';
 import { toAxiosRequest } from './utils';
 
 function useEntityRequest() {
   const api = useApi();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setPromise] = useLoading();
 
-  async function request(entityRequest: EntityRequest) {
-    setIsLoading(true);
-    try {
-      const response = await api.request(toAxiosRequest(entityRequest));
-      setIsLoading(false);
-      return response;
-    } catch (e) {
-      setIsLoading(false);
-      throw e;
-    }
+  function request(entityRequest: EntityRequest) {
+    const req = api.request(toAxiosRequest(entityRequest));
+    return setPromise(req);
   }
 
   return {

app/soapbox/hooks/index.ts

@@ -11,6 +11,7 @@ export { useGroupsPath } from './useGroupsPath';
 export { useDimensions } from './useDimensions';
 export { useFeatures } from './useFeatures';
 export { useInstance } from './useInstance';
+export { useLoading } from './useLoading';
 export { useLocale } from './useLocale';
 export { useOnScreen } from './useOnScreen';
 export { useOwnAccount } from './useOwnAccount';

app/soapbox/hooks/useLoading.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+function useLoading() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  function setPromise<T>(promise: Promise<T>) {
+    setIsLoading(true);
+
+    promise
+      .then(() => setIsLoading(false))
+      .catch(() => setIsLoading(false));
+
+    return promise;
+  }
+
+  return [isLoading, setPromise] as const;
+}
+
+export { useLoading };