Hey everyone,
I’m currently working on developing a React plugin for InDesign and could use some guidance regarding implementing a Loader.
Specifically, I’m looking to incorporate a loader that indicates when LogIn to Plugin, data is being fetched or operations are in progress within the plugin .
I’ve explored a few options but would love to hear from others who have tackled similar challenges. What strategies or libraries have you found effective for implementing loaders in InDesign plugins built with React? Any tips or code snippets would be greatly appreciated!
Looking forward to your insights!
Welcome to the forums!
Animations are still unsupported in UXP, so you’ll have to just have loading text for now. For something like this I’d use React’s built in state management (useState), here’s a rough and dirty typescript example. I don’t think this would work right off the bat but it’s a start:
import useState from 'react';
export default async function LoadingExample() {
// create a new isLoading state (default true)
const [isLoading, setIsLoading] = useState<boolean>(true);
// hit some api and set the loading state when it returns something
const status = await hitSomeApi();
setIsLoading(false);
return (
<span>{isLoading ? "Loading..." : "Loaded!"}</span>
)
}
You could also explore using Recoil.js, which is a global state management library.