Loading POC

BuoySoftware · Feb 8, 2023 · 830d0ac · 830d0ac
1 parent 4dd886a
commit 830d0ac
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/packages/components/page_template/src/page_content.tsx b/packages/components/page_template/src/page_content.tsx
@@ -1,14 +1,33 @@
 import { Box, BoxProps } from "@buoysoftware/anchor-layout";
+import { LoadingIndicator } from "@buoysoftware/anchor-loading-indicator";
 
-type PageContentProps = Omit<BoxProps, "gridArea">;
+interface OwnProps {
+  loading?: boolean;
+}
+
+type PageContentProps = OwnProps & Omit<BoxProps, "gridArea">;
 
 export const PageContent: React.FC<PageContentProps> = ({
   children,
+  loading,
   ...props
 }): React.ReactElement => {
   return (
-    <Box gridArea="content" mt="40px" px="page.gutterX" {...props}>
-      {children}
+    <Box
+      gridArea="content"
+      display={loading ? "grid" : "block"}
+      mt="40px"
+      px="page.gutterX"
+      {...props}
+    >
+      {loading ? (
+        <Box justifySelf="center" alignSelf="center">
+          <LoadingIndicator strokeSize={2} size={40} color="grey70" />
+          <p>Loading</p>
+        </Box>
+      ) : (
+        children
+      )}
     </Box>
   );
 };
diff --git a/packages/components/page_template/stories/page_template.stories.mdx b/packages/components/page_template/stories/page_template.stories.mdx
@@ -1,7 +1,8 @@
 import { Canvas, Story } from "@storybook/addon-docs";
 
+import { LoadingIndicator } from "@buoysoftware/anchor-loading-indicator";
 import { DropdownMenu, DropdownMenuList, DropdownMenuItem } from "@buoysoftware/anchor-dropdown-menu";
-import { Flex } from "@buoysoftware/anchor-layout";
+import { Box, Flex } from "@buoysoftware/anchor-layout";
 import { Breadcrumbs, Breadcrumb } from "@buoysoftware/anchor-breadcrumbs";
 import { Button } from "@buoysoftware/anchor-button";
 
@@ -83,3 +84,21 @@ import { PageActionBar, PageBreadcrumbs, PageContent, PageFooter, PageHeader, Pa
     </PageTemplate>
   </Story>
 </Canvas>
+
+## With Loader
+
+<Canvas>
+  <Story name="with Loader" args={{}}>
+    <PageTemplate>
+      <PageBreadcrumbs>
+        <Breadcrumbs>
+          <Breadcrumb>Questionnaires</Breadcrumb>
+        </Breadcrumbs>
+      </PageBreadcrumbs>
+      <PageHeader title="Template example" />
+      <PageContent loading>
+        Content is loading
+      </PageContent>
+    </PageTemplate>
+  </Story>
+</Canvas>