added loading states to category and language filters

packages/client/src/pages/FormGallery/Filter/CategoryFilter/index.js

@@ -40,9 +40,11 @@ const CategoryFilter = ({
   fetchCategoriesOfCategoryType,
 }) => {
   const [menuItems, setMenuItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     (async () => {
+      setIsLoading(true);
       let newMenuItems = await fetchCategoryTypes();
 
       const categoryPromises = newMenuItems.map(
@@ -68,11 +70,14 @@ const CategoryFilter = ({
             categories: [],
           }));
         })
-        .finally(() => setMenuItems(newMenuItems));
+        .finally(() => {
+          setMenuItems(newMenuItems);
+          setIsLoading(false);
+        });
     })();
   }, []);
 
-  if (menuItems.length === 0) return null;
+  if (!isLoading && menuItems.length === 0) return null;
 
   return (
     <StyledCategoryFilterWrapper
@@ -85,7 +90,8 @@ const CategoryFilter = ({
   );
 };
 export default inject(({ oformsStore }) => ({
-  noLocales: oformsStore.oformLocales.length === 0,
+  noLocales:
+    oformsStore.oformLocales !== null && oformsStore.oformLocales?.length === 0,
   fetchCategoryTypes: oformsStore.fetchCategoryTypes,
   fetchCategoriesOfCategoryType: oformsStore.fetchCategoriesOfCategoryType,
 }))(observer(CategoryFilter));

packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js

@@ -29,7 +29,7 @@ const LanguageFilter = ({
     sectionScroll.scrollTop = 0;
   };
 
-  if (oformLocales.length === 0) return null;
+  if (oformLocales !== null && oformLocales?.length === 0) return null;
 
   return (
     <Styled.LanguageFilter>
@@ -63,7 +63,7 @@ const LanguageFilter = ({
         selectedOption={{}}
         advancedOptions={
           <>
-            {oformLocales.map((locale) => (
+            {oformLocales?.map((locale) => (
               <Styled.LanguageFilterItem
                 className={"language-item"}
                 key={locale}

packages/client/src/store/OformsStore.js

@@ -32,7 +32,7 @@ class OformsStore {
   currentCategory = null;
   categoryTitles = [];
 
-  oformLocales = [];
+  oformLocales = null;
 
   submitToGalleryTileIsVisible = !localStorage.getItem(
     "submitToGalleryTileIsHidden"
@@ -45,7 +45,7 @@ class OformsStore {
 
   get defaultOformLocale() {
     const userLocale = convertToLanguage(getCookie(LANGUAGE)) || "en";
-    return this.oformLocales.includes(userLocale) ? userLocale : "en";
+    return this.oformLocales?.includes(userLocale) ? userLocale : "en";
   }
 
   setOformFiles = (oformFiles) => (this.oformFiles = oformFiles);