feat: add content loader animation

fluentci-io · Aug 11, 2024 · 108d16c · 108d16c
1 parent 11ffe1d
commit 108d16c
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 76 deletions.
diff --git a/webui/src/Containers/Home/MainContent/Loader.tsx b/webui/src/Containers/Home/MainContent/Loader.tsx
@@ -0,0 +1,21 @@
+import { FC } from "react";
+import ContentLoader from "react-content-loader";
+
+const Loader: FC = (props) => {
+  return (
+    <ContentLoader
+      viewBox="0 0 778 116"
+      backgroundColor="#1207326a"
+      foregroundColor="#21163f"
+      {...props}
+    >
+      <rect x="37" y="34" rx="0" ry="0" width="0" height="0" />
+      <rect x="28" y="29" rx="0" ry="0" width="258" height="32" />
+      <rect x="28" y="71" rx="0" ry="0" width="465" height="32" />
+      <rect x="434" y="94" rx="0" ry="0" width="0" height="0" />
+      <rect x="29" y="116" rx="0" ry="0" width="749" height="32" />
+    </ContentLoader>
+  );
+};
+
+export default Loader;
diff --git a/webui/src/Containers/Home/MainContent/MainContent.tsx b/webui/src/Containers/Home/MainContent/MainContent.tsx
@@ -24,6 +24,7 @@ import { Github, Calendar } from "@styled-icons/bootstrap";
 import { Buildings } from "@styled-icons/boxicons-regular";
 import { LockClosed } from "@styled-icons/ionicons-outline";
 import dayjs from "dayjs";
+import Loader from "./Loader";
 
 export type MainContentProps = {
   projects?: Project[];
@@ -80,86 +81,100 @@ const MainContent: FC<MainContentProps> = (props) => {
               )}
             </div>
           )}
-          <div style={{ flex: 1 }}>
-            <Header>
-              <Title>Projects</Title>
-              {props.displayNewProjectButton && (
-                <RunButton onClick={onNewProject}>New Project</RunButton>
-              )}
-            </Header>
-            {projects!.map((item, index) => (
-              <div
-                key={index}
-                style={{ marginBottom: 25, position: "relative" }}
-              >
-                <ProjectWrapper>
-                  <PictureWrapper>
-                    <Picture src={item.picture} />
-                  </PictureWrapper>
-                  <div style={{ width: "calc(50% - 40px)" }}>
-                    <Link to={`/project/${item.id}`} style={{ color: "#fff" }}>
-                      <Row>
-                        <div>{item.displayName || item.name}</div>
-                        {item.isPrivate === false && (
-                          <Visibility>Public</Visibility>
+          {loading && (
+            <div style={{ flex: 1 }}>
+              <Loader />
+            </div>
+          )}
+          {!loading && (
+            <div style={{ flex: 1 }}>
+              <Header>
+                <Title>Projects</Title>
+                {props.displayNewProjectButton && (
+                  <RunButton onClick={onNewProject}>New Project</RunButton>
+                )}
+              </Header>
+              {projects!.map((item, index) => (
+                <div
+                  key={index}
+                  style={{ marginBottom: 25, position: "relative" }}
+                >
+                  <ProjectWrapper>
+                    <PictureWrapper>
+                      <Picture src={item.picture} />
+                    </PictureWrapper>
+                    <div style={{ width: "calc(50% - 40px)" }}>
+                      <Link
+                        to={`/project/${item.id}`}
+                        style={{ color: "#fff" }}
+                      >
+                        <Row>
+                          <div>{item.displayName || item.name}</div>
+                          {item.isPrivate === false && (
+                            <Visibility>Public</Visibility>
+                          )}
+                          {item.archived === true && <Archive>Archive</Archive>}
+                        </Row>
+                        {item.path !== "empty" && !!item.path && (
+                          <Path>{item.path}</Path>
                         )}
-                        {item.archived === true && <Archive>Archive</Archive>}
-                      </Row>
-                      {item.path !== "empty" && !!item.path && (
-                        <Path>{item.path}</Path>
-                      )}
-                    </Link>
-                    <div>
-                      {item.tags
-                        ?.filter((x) => x)
-                        .map((tag, index) => (
-                          <Tag key={index}>{tag}</Tag>
-                        ))}
+                      </Link>
+                      <div>
+                        {item.tags
+                          ?.filter((x) => x)
+                          .map((tag, index) => (
+                            <Tag key={index}>{tag}</Tag>
+                          ))}
+                      </div>
+                    </div>
+                    {_.get(item, "recentRuns.0.status") && (
+                      <BuildHistory
+                        status={_.last(item.recentRuns)?.status || "PENDING"}
+                        reliability={item.reliability || 0}
+                        speed={item.speed || 0}
+                        buildsPerWeek={item.buildsPerWeek || 0}
+                        builds={
+                          Array.from(Array(18).keys()).map((i) => ({
+                            status: _.get(item, `recentRuns.${i}.status`, ""),
+                            duration: _.get(
+                              item,
+                              `recentRuns.${i}.duration`,
+                              0
+                            ),
+                          })) || []
+                        }
+                      />
+                    )}
+                  </ProjectWrapper>
+                </div>
+              ))}
+              {!projects?.length && (
+                <>
+                  {!profile && !loading && (
+                    <div style={{ color: "rgba(115, 146, 177, 0.7)" }}>
+                      No projects found. Create a new project to get started.
                     </div>
-                  </div>
-                  {_.get(item, "recentRuns.0.status") && (
-                    <BuildHistory
-                      status={_.last(item.recentRuns)?.status || "PENDING"}
-                      reliability={item.reliability || 0}
-                      speed={item.speed || 0}
-                      buildsPerWeek={item.buildsPerWeek || 0}
-                      builds={
-                        Array.from(Array(18).keys()).map((i) => ({
-                          status: _.get(item, `recentRuns.${i}.status`, ""),
-                          duration: _.get(item, `recentRuns.${i}.duration`, 0),
-                        })) || []
-                      }
-                    />
                   )}
-                </ProjectWrapper>
-              </div>
-            ))}
-            {!projects?.length && (
-              <>
-                {!profile && !loading && (
-                  <div style={{ color: "rgba(115, 146, 177, 0.7)" }}>
-                    No projects found. Create a new project to get started.
-                  </div>
-                )}
-                {profile && !loading && (
-                  <div
-                    style={{
-                      color: "#7392b1b2",
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                  >
-                    <LockClosed size={60} color="#7392b17d" />
-                    <div style={{ marginTop: 10 }}>
-                      This user has no public projects.
+                  {profile && !loading && (
+                    <div
+                      style={{
+                        color: "#7392b1b2",
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                    >
+                      <LockClosed size={60} color="#7392b17d" />
+                      <div style={{ marginTop: 10 }}>
+                        This user has no public projects.
+                      </div>
                     </div>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
         </Row>
       </Container>
       <div style={{ height: 100 }} />