Make content cards not sticky, for better support of smaller screens (#148)

* [Invoices] Remove sticky containers for better support of small screens

* Change loader to be circular instead linear

.changeset/thick-singers-mate.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-invoices": minor
+---
+
+Unsticky app cards and change loader type

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 test-invoice.pdf
 coverage/
 apps/**/generated
+
+.eslintcache

apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx

@@ -8,18 +8,17 @@ import { ChannelsList } from "./channels-list";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { AppColumnsLayout } from "../../ui/app-columns-layout";
 import { TitleBar } from "@saleor/apps-shared";
+import { Loader } from "../../ui/loader";
 
 const useStyles = makeStyles((theme) => {
   return {
     header: { marginBottom: 20 },
     grid: { display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "start", gap: 40 },
     formContainer: {
-      top: TitleBar.height + 16,
-      position: "sticky",
+      marginTop: 12,
     },
     instructionsContainer: {
-      top: TitleBar.height + 16,
-      position: "sticky",
+      marginTop: 12,
       padding: 15,
     },
   };
@@ -64,7 +63,7 @@ export const ChannelsConfiguration = () => {
   }, [channels.data, activeChannelSlug]);
 
   if (channels.isLoading || !channels.data) {
-    return <LinearProgress />;
+    return <Loader />;
   }
 
   if (!activeChannel) {
@@ -76,7 +75,10 @@ export const ChannelsConfiguration = () => {
       <ChannelsList
         channels={channels.data}
         activeChannelSlug={activeChannel.slug}
-        onChannelClick={setActiveChannelSlug}
+        onChannelClick={(slug) => {
+          setActiveChannelSlug(slug);
+          window.scrollTo({ top: 0, behavior: "smooth" });
+        }}
       />
 
       {activeChannel ? (

apps/invoices/src/modules/ui/loader.tsx

@@ -0,0 +1,21 @@
+import { CircularProgress } from "@material-ui/core";
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 300,
+  },
+});
+
+export const Loader = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <CircularProgress color="primary" />
+    </div>
+  );
+};

apps/invoices/src/pages/index.tsx

@@ -3,8 +3,8 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { useEffect } from "react";
 import { useIsMounted } from "usehooks-ts";
 import { useRouter } from "next/router";
-import { LinearProgress } from "@material-ui/core";
 import { isInIframe } from "@saleor/apps-shared";
+import { Loader } from "../modules/ui/loader";
 
 const IndexPage: NextPage = () => {
   const { appBridgeState } = useAppBridge();
@@ -18,7 +18,7 @@ const IndexPage: NextPage = () => {
   }, [isMounted, appBridgeState?.ready]);
 
   if (isInIframe()) {
-    return <LinearProgress />;
+    return <Loader />;
   }
 
   return (