From a19ac6aa5fea8ea93b0d41779e1e4968a88c2ef4 Mon Sep 17 00:00:00 2001
From: Saumya Pandey <sp160899@gmail.com>
Date: Sat, 5 Jun 2021 22:22:49 +0530
Subject: [PATCH] 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 | 15 ++++++++++++---
 shared/i18n/locales/en_US/translation.json       |  1 +
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js
index 97141b08..b2ce303a 100644
--- a/app/components/Sidebar/components/Collections.js
+++ b/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>
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 7306ee1c..65b469d6 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/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",