fix: Failure loading collections on frontend results in loading loop (#2176)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/Sidebar/components/Collections.js

@@ -20,6 +20,7 @@ type Props = {
 
 function Collections({ onCreateCollection }: Props) {
   const [isFetching, setFetching] = React.useState(false);
+  const [fetchError, setFetchError] = React.useState();
   const { ui, policies, documents, collections } = useStores();
   const isPreloaded: boolean = !!collections.orderedData.length;
   const { t } = useTranslation();
@@ -32,17 +33,25 @@ function Collections({ onCreateCollection }: Props) {
 
   React.useEffect(() => {
     async function load() {
-      if (!collections.isLoaded && !isFetching) {
+      if (!collections.isLoaded && !isFetching && !fetchError) {
         try {
           setFetching(true);
           await collections.fetchPage({ limit: 100 });
+        } catch (error) {
+          ui.showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
+          );
+          setFetchError(error);
         } finally {
           setFetching(false);
         }
       }
     }
     load();
-  }, [collections, isFetching]);
+  }, [collections, isFetching, ui, fetchError, t]);
 
   const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
     accept: "collection",
@@ -92,7 +101,7 @@ function Collections({ onCreateCollection }: Props) {
     </>
   );
 
-  if (!collections.isLoaded) {
+  if (!collections.isLoaded || fetchError) {
     return (
       <Flex column>
         <Header>{t("Collections")}</Header>

shared/i18n/locales/en_US/translation.json

@@ -109,6 +109,7 @@
   "Dismiss": "Dismiss",
   "Keyboard shortcuts": "Keyboard shortcuts",
   "Back": "Back",
+  "Collections could not be loaded, please reload the app": "Collections could not be loaded, please reload the app",
   "New collection": "New collection",
   "Collections": "Collections",
   "Untitled": "Untitled",