feat: add loading indicator stubs

1 files changed, 10 insertions, 4 deletions

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>))}