Fix issues

aidbox-forms-smart-launch/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-query": "^5.59.16",
     "@tanstack/react-table": "^8.20.5",
+    "ahooks": "^3.8.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "fhirclient": "^2.5.4",

aidbox-forms-smart-launch/src/components/indefinite-progress.jsx

@@ -3,29 +3,43 @@ import { useEffect, useRef, useState } from "react";
 
 export const IndefiniteProgress = ({ active }) => {
   const [value, setValue] = useState(0);
-  const prevActive = useRef(false);
+  const [visible, setVisible] = useState(false);
+  const intervalRef = useRef(null);
 
   useEffect(() => {
-    if (active && !prevActive.current) {
-      const interval = setInterval(() => {
-        setValue((prev) => {
-          if (prev >= 99.8) return prev; // Safeguard to avoid reaching 100
+    if (active) {
+      setVisible(true);
+      setValue(0);
 
-          // Calculate a smaller increment as the value gets closer to 100
-          const progressIncrease = (100 - prev) / 30; // Smaller divisor means faster slowing as it approaches 100
+      // Start interval to increment value
+      intervalRef.current = setInterval(() => {
+        setValue((prev) => {
+          if (prev >= 99.8) return prev; // Prevent going over 99.8
+          const progressIncrease = (100 - prev) / 30; // Slows down as it approaches 100
           return prev + progressIncrease;
         });
       }, 100);
+    } else {
+      // Stop interval when inactive and finalize progress
+      clearInterval(intervalRef.current);
+      setValue(100);
 
-      return () => clearInterval(interval);
-    }
+      // Hide after animation completes
+      const timeout = setTimeout(() => {
+        setVisible(false);
+      }, 500); // Wait for animations or transitions if any
 
-    if (!active && prevActive.current) {
-      setValue(100);
+      return () => clearTimeout(timeout); // Cleanup timeout if `active` changes quickly
     }
 
-    prevActive.current = active;
+    return () => {
+      clearInterval(intervalRef.current); // Cleanup interval on component unmount or active change
+    };
   }, [active]);
 
-  return <Progress value={value} />;
+  return visible ? (
+    <Progress value={value} className="rounded-none h-[3px]" />
+  ) : (
+    <div className="h-[3px] w-full"></div>
+  );
 };

aidbox-forms-smart-launch/src/components/questionnaire-builder.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { publicBuilderClient, useClient } from "@/hooks/use-client.jsx";
 import { useAwaiter } from "@/hooks/use-awaiter.jsx";
 import { findQuestionnaireWithClient, saveQuestionnaire } from "@/lib/utils.js";
@@ -13,7 +13,7 @@ export const QuestionnaireBuilder = ({ id }) => {
 
   const {
     data: [usedClient, questionnaire],
-  } = useQuery({
+  } = useSuspenseQuery({
     queryKey: ["questionnaire", id],
     queryFn: () => findQuestionnaireWithClient(client, id),
   });

aidbox-forms-smart-launch/src/components/questionnaire-preview.jsx

@@ -1,5 +1,5 @@
 import { useClient } from "@/hooks/use-client.jsx";
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
 import { useToast } from "@/hooks/use-toast.js";
 import { useAwaiter } from "@/hooks/use-awaiter.jsx";
@@ -9,7 +9,7 @@ export const QuestionnairePreview = ({ id }) => {
   const ref = useRef();
   const client = useClient();
 
-  const { data: questionnaire } = useQuery({
+  const { data: questionnaire } = useSuspenseQuery({
     queryKey: ["questionnaire", id],
     queryFn: () => findQuestionnaire(client, id),
   });

aidbox-forms-smart-launch/src/components/welcome.jsx

@@ -1,13 +1,7 @@
 import { Button } from "@/ui/button.jsx";
-import {
-  ChevronRight,
-  ChevronsUpDown,
-  Play,
-  Stethoscope,
-  User,
-} from "lucide-react";
+import { ChevronsUpDown, Play, Stethoscope, User } from "lucide-react";
 import { createSmartAppLauncherUrl } from "@/lib/utils.js";
-import { clientId, defaultScope, authorize } from "@/hooks/use-client.jsx";
+import { authorize, clientId, defaultScope } from "@/hooks/use-client.jsx";
 import {
   Card,
   CardContent,
@@ -43,12 +37,8 @@ export const Welcome = () => {
   const [tab, setTab] = useLocalStorageState("welcome-tab", {
     defaultValue: "ehr",
   });
-  const [issuer, setIssuer, { removeItem: resetIssuer }] = useLocalStorageState(
-    "issuer",
-    {
-      defaultValue: "https://launch.smarthealthit.org/v/r4/fhir",
-    },
-  );
+  const [issuer, setIssuer, { removeItem: resetIssuer }] =
+    useLocalStorageState("issuer");
   const [scope, setScope, { removeItem: resetScope }] = useLocalStorageState(
     "scope",
     {
@@ -165,7 +155,7 @@ export const Welcome = () => {
                       launchType: "provider-ehr",
                     })}
                   >
-                    <Stethoscope className="text-orange-500 my-4" />
+                    <Stethoscope className="text-primary my-4" />
                     Provider EHR
                   </a>
                 </Button>
@@ -176,7 +166,7 @@ export const Welcome = () => {
                       launchType: "patient-portal",
                     })}
                   >
-                    <User className="text-orange-500 my-4" />
+                    <User className="text-primary my-4" />
                     Patient Portal
                   </a>
                 </Button>
@@ -251,7 +241,7 @@ export const Welcome = () => {
                       }
                     }}
                   >
-                    <Play className="text-orange-500 my-4" />
+                    <Play className="text-primary my-4" />
                     Launch
                   </Button>
                 </CardFooter>

aidbox-forms-smart-launch/src/hooks/use-client.jsx

@@ -1,7 +1,6 @@
 import { createContext, useContext } from "react";
 import { client, oauth2 } from "fhirclient";
-import { useQuery } from "@tanstack/react-query";
-import { useSearchParams } from "react-router-dom";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 export const clientId = "aidbox-forms";
 
@@ -58,7 +57,7 @@ export const useClient = () => {
 export const ClientProvider = ({ children }) => {
   const { searchParams } = new URL(window.location);
 
-  const { data: client } = useQuery({
+  const { data: client } = useSuspenseQuery({
     queryKey: ["client"],
     queryFn: () => {
       const redirectUri = window.location.pathname + window.location.hash;

aidbox-forms-smart-launch/src/hooks/use-launch-context.jsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 import { publicBuilderClient, useClient } from "@/hooks/use-client.jsx";
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 const readLaunchResource = async (client, resourceType) => {
   const { fhirContext } = client?.state?.tokenResponse;
@@ -56,7 +56,7 @@ export const useLaunchContext = () => {
 export const LaunchContextProvider = ({ children }) => {
   const client = useClient();
 
-  const { data } = useQuery({
+  const { data } = useSuspenseQuery({
     queryKey: ["launch-context"],
     queryFn: () => readLaunchContext(client),
   });