feat: category list loading render

src/pages/courses/components/CategoryList/CategoryItem.tsx

@@ -21,7 +21,9 @@ const CategoryItem: React.FC<CategoryItemProps> = ({ category }) => {
   /**
    * Handle click on change category
    */
-  const onCategoryChange = () => setSelectedCategory(category);
+  const onCategoryChange = () => {
+    setSelectedCategory(category);
+  };
 
   return (
     <Tag

src/pages/courses/components/CategoryList/CategoryList.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Box, Flex, Tag, TagLabel } from '@chakra-ui/react';
 import { CoursesPageContext } from 'contexts';
 import CategoryItem from './CategoryItem';
@@ -10,6 +10,14 @@ type CategoryListProps = {
 
 const CategoryList: React.FC<CategoryListProps> = ({ categories }) => {
   const { selectedCategory, setSelectedCategory } = useContext(CoursesPageContext);
+
+  /**
+   * Handle on changing category
+   */
+  useEffect(() => {
+    console.log(`[LOG:] Selected category: ${selectedCategory?.title}`);
+  }, [selectedCategory]);
+
   return (
     <Box mb='5'>
       <Flex sx={{ columnGap: '7px', rowGap: '5px' }} flexWrap='wrap'>

src/pages/courses/components/CategoryList/CategoryListLoading.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Flex, Skeleton } from '@chakra-ui/react';
+
+const CategoryListLoading: React.FC = () => {
+  return (
+    <Flex mb='5' sx={{ columnGap: '7px', rowGap: '5px' }}>
+      <Skeleton height='20px' width='50px' borderRadius='full' />
+      <Skeleton height='20px' width='50px' borderRadius='full' />
+      <Skeleton height='20px' width='50px' borderRadius='full' />
+      <Skeleton height='20px' width='50px' borderRadius='full' />
+      <Skeleton height='20px' width='50px' borderRadius='full' />
+    </Flex>
+  );
+};
+
+export default CategoryListLoading;

src/pages/courses/index.tsx

@@ -17,6 +17,7 @@ import CategoryList from './components/CategoryList';
 import { useRootStore } from 'hooks/useRootStore';
 import { CoursesPageContextProvider } from 'providers';
 import { useErrorHandler } from 'react-error-boundary';
+import CategoryListLoading from './components/CategoryList/CategoryListLoading';
 
 /**
  * Courses page
@@ -29,8 +30,10 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
   const handleError = useErrorHandler();
 
   useEffect(() => {
+    if (me !== null) {
       categoryStore.loadCategories().catch(error => handleError(error));
-  }, [categoryStore, handleError]);
+    }
+  }, [me, categoryStore, handleError]);
 
   /**
    * TODO: Loading page for courses
@@ -62,7 +65,14 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
             </Tabs>
           )}
           <Box mt='5'>
+            {/* Category List Rendering */}
+            {categoryStore.categories !== null ? (
               <CategoryList categories={categoryStore.categories} />
+            ) : (
+              <CategoryListLoading />
+            )}
+
+            {/* Course List Rendering */}
             <CourseList />
           </Box>
         </Box>

src/pages/users/components/UserList/UserList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import { Flex, Box, Stack, Text } from '@chakra-ui/layout';
 import { Button } from '@chakra-ui/button';
@@ -155,4 +154,4 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
   );
 };
 
-export default observer(UserList);
+export default UserList;

src/stores/CategoryStore.ts

@@ -9,7 +9,7 @@ export default class CategoryStore {
 
   public categoryService: CategoryService;
 
-  public categories: ICategory[] = [];
+  public categories: ICategory[] | null = null;
 
   constructor(root: RootStore, api: AxiosInstance) {
     this.root = root;