update page,

002_source/cms/src/app/dashboard/lesson_categories/page.tsx

@@ -17,6 +17,7 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
 import { defaultLessonCategory, type LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
 import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
 import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
@@ -48,6 +49,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const [recordCount, setRecordCount] = React.useState<number>(0);
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
   const [currentPage, setCurrentPage] = React.useState<number>(1);
+  //
+  const [showError, setShowError] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
 
   //
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -57,6 +61,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status: spStatus });
 
   const reloadRows = () => {
+    setShowLoading(true);
+
     pb.collection(COL_LESSON_CATEGORIES)
       .getList(currentPage, rowsPerPage, {})
       .then((lessonCategories: ListResult<RecordModel>) => {
@@ -72,6 +78,10 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       .catch((err) => {
         logger.error(err);
         toast(t('dashboard.lessonTypes.list.error'));
+        setShowError(true);
+      })
+      .finally(() => {
+        setShowLoading(false);
       });
   };
 
@@ -79,7 +89,16 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     reloadRows();
   }, []);
 
-  if (lessonCategoriesData.length < 1) return <FormLoading />;
+  if (showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('"Unable to process request"')}
+        code="500"
+        details={t('Detailed error information...')}
+      />
+    );
 
   // return <pre>{JSON.stringify(lessonCategoriesData, null, 2)}</pre>;