fix for loading animation

interledger · May 15, 2024 · d938c63 · d938c63
1 parent 0770083
commit d938c63
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 11 deletions.
diff --git a/app/components/loader.tsx b/app/components/loader.tsx
@@ -1,17 +1,7 @@
 import { motion } from "framer-motion";
-import { useEffect } from "react";
 import { useBackdropContext } from "~/lib/context/backdrop";
 
 export function Fallback() {
-  const { isLoading, setIsLoading } = useBackdropContext();
-
-  useEffect(() => {
-    setIsLoading(true);
-    return () => {
-      setIsLoading(false);
-    };
-  }, [isLoading, setIsLoading]);
-
   return null;
 }
 

diff --git a/app/components/providers/backdropProvider.tsx b/app/components/providers/backdropProvider.tsx
@@ -6,7 +6,7 @@ type BackdropProviderProps = {
 };
 
 export const BackdropProvider = ({ children }: BackdropProviderProps) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   return (
     <BackdropContext.Provider

diff --git a/app/routes/finish.tsx b/app/routes/finish.tsx
@@ -7,6 +7,7 @@ import { Header } from "~/components/header";
 import { FinishCheck, FinishError } from "~/components/icons";
 import { Fallback, Loader } from "~/components/loader";
 import { Button } from "~/components/ui/button";
+import { useBackdropContext } from "~/lib/context/backdrop";
 import { useDialogContext } from "~/lib/context/dialog";
 import {
   type PaymentResultType,
@@ -88,6 +89,7 @@ export default function Finish() {
 
   const { setOpen } = useDialogContext();
   setOpen(false);
+  const { setIsLoading } = useBackdropContext();
 
   return (
     <>
@@ -101,6 +103,7 @@ export default function Finish() {
           >
             {(outgoingPaymentCheck) => (
               <>
+                {setIsLoading(false)}
                 {outgoingPaymentCheck.error ? (
                   <>
                     <FinishError />