From aa04c35e73ddd1f2d38de68e437c0c3d697d42e2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 24 Apr 2021 18:43:52 +0300
Subject: feat: add loading indicator stubs

---
 src/components/ListTable.tsx |  9 +++++++--
 src/containers/Page.tsx      | 14 ++++++++++----
 src/lib/ServiceList.tsx      | 10 ++++++++--
 3 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index 6874387..9b880a3 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -10,6 +10,7 @@ export interface Field {
 interface Props<T = any> {
   items?: T[];
   fields: Field[];
+  isValidating?: boolean;
   handleRowClick?: (item: T, index?: number) => void;
 }
 
@@ -24,7 +25,7 @@ const getItemField = (item: any, field: Field) => {
 };
 
 
-const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () => {} }) => {
+const ListTable: React.FC<Props> = ({ items = [], fields, isValidating, handleRowClick = () => {} }) => {
   const [sortBy, setSortBy] = useState<string>('');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
 
@@ -40,7 +41,11 @@ const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () =>
     setSortBy(field.key);
   }, [sortBy, sortOrder]);
 
-  if (!items.length) return <div className="text-center p-6">Ничего не найдено</div>;
+  if (!items.length) return (
+    <div className="text-center p-6">
+      {isValidating ? 'Загрузка...' : 'Ничего не найдено'}
+    </div>
+  );
 
   return (
     <table className="table-auto w-full">
diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 887e839..2d6fd14 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -7,15 +7,21 @@ interface Props {
   title?: string;
   actions?: Action[];
   filters?: JSX.Element;
+  isValidating?: boolean;
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => (
-  <Paper className="xl:m-5">
-    <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
-      <span className="text-2xl font-bold">{title}</span>
+const Spinner: React.FC = () => <>  O</>; // TODO: replace with spinner
+
+const Page: React.FC<Props> = ({ title, actions, filters, isValidating, className, children }) => (
+  <Paper className="xl:m-5 overflow-x-auto">
+    <div className={`${style} flex-col items-start`}>
+      <span className="text-2xl font-bold">
+        {title}
+        {isValidating && <Spinner />}
+      </span>
       <div className="flex">
         {filters}
         {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index be9a311..21b6077 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -12,7 +12,7 @@ const ServiceList: React.FC = () => {
   const service = useContext(ServiceContext);
   const history = useHistory();
   const location = useLocation();
-  const { data } = hooks[service.route].useList(location.search);
+  const { data, isValidating } = hooks[service.route].useList(location.search);
 
   const actions = service.actions || [{
     name: 'Добавить',
@@ -37,10 +37,16 @@ const ServiceList: React.FC = () => {
   return (
     <Page
       title={service.name}
+      isValidating={isValidating}
       actions={actions}
       filters={filters}
     >
-      <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
+      <ListTable
+        items={data}
+        fields={service.tableFields}
+        isValidating={isValidating}
+        handleRowClick={handleRowClick}
+      />
     </Page>
   );
 };
-- 
cgit v1.2.3