Add loading page for inserting eRSD data into the DB (#123)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx

@@ -1,14 +1,36 @@
 import { Button, Icon } from "@trussworks/react-uswds";
+import { useState } from "react";
 import styles from "../queryBuilding.module.scss";
 import { useRouter } from "next/navigation";
 import classNames from "classnames";
-
+import WorkSpaceSetUpView from "../loadingState/WorkspaceSetUp";
 /**
  * Empty-state component for query building
  * @returns the EmptyQueriesDisplay to render the empty state status
  */
 export const EmptyQueriesDisplay: React.FC = () => {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+
+    // DB Creation Function
+    console.log("Creating DB...");
+
+    await new Promise((r) => setTimeout(r, 5000)); //remove once DB creation is implemented
+    // await createDibbsDB();
+
+    // Stop loading and redirect once function is complete
+    setLoading(false);
+
+    // Redirect to query building page
+    // router.push("/queryBuilding/buildFromTemplates");
+  };
+
+  if (loading) {
+    return <WorkSpaceSetUpView loading={loading} />;
+  }
 
   return (
     <>
@@ -29,9 +51,8 @@ export const EmptyQueriesDisplay: React.FC = () => {
           <h2 className={styles.emptyQueryTitle}>
             No custom queries available
           </h2>
-
           <Button
-            onClick={() => router.push(`/queryBuilding/buildFromTemplates`)}
+            onClick={() => handleClick()}
             className={styles.createQueryButton}
             type={"button"}
           >

query-connector/src/app/queryBuilding/loadingState/WorkspaceSetUp.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Icon } from "@trussworks/react-uswds";
+import classNames from "classnames";
+import React from "react";
+import styles from "../queryBuilding.module.scss";
+
+interface LoadingViewProps {
+  loading: boolean;
+}
+
+/**
+ *
+ * @param root0 - Component for loading screen.
+ * @param root0.loading - Boolean to track loading state.
+ * @returns The LoadingView component.
+ */
+const WorkSpaceSetUpView: React.FC<LoadingViewProps> = ({ loading }) => {
+  if (loading) {
+    return (
+      <>
+        <div
+          className={classNames(
+            "bg-gray-5",
+            "display-flex",
+            "flex-align-center",
+            "flex-justify-center",
+            styles.emptyStateQueryContainer,
+          )}
+        >
+          <div className="display-flex flex-column flex-align-center">
+            <Icon.HourglassEmpty
+              aria-label="Icon of empty hourglass to indicate loading state"
+              className={styles.emptyQueryIcon}
+            ></Icon.HourglassEmpty>
+            <h2 className={styles.emptyQueryTitle}>
+              Setting up your workspace...
+            </h2>
+            <p>This is a one-time setup that may take several minutes.</p>
+            <p> Please do not navigate away from page during setup.</p>
+          </div>
+        </div>
+      </>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default WorkSpaceSetUpView;

query-connector/src/db-creation.ts

@@ -175,7 +175,7 @@ async function fetchBatchValueSetsFromVsac(oidData: OidData, batchSize = 100) {
  * Overall orchestration function that performs the scripted process of querying
  * the eRSD, extracting OIDs, then inserting valuesets into the DB.
  */
-async function createDibbsDB() {
+export async function createDibbsDB() {
   const ersdOidData = await getOidsFromErsd();
   if (ersdOidData) {
     await fetchBatchValueSetsFromVsac(ersdOidData);