feat(ui): dynamic prompts loading ux

- Prompt must have an open curly brace followed by a close curly brace to enable dynamic prompts processing
- If a the given prompt already had a dynamic prompt cached, do not re-process
- If processing is not needed, user may invoke immediately
- Invoke button shows loading state when dynamic prompts are processing, tooltip says generating
- Dynamic prompts preview icon in prompt box shows loading state when processing, tooltip says generating

invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx

@@ -41,6 +41,9 @@ const selector = createMemoizedSelector([stateSelector], (state) => {
 });
 
 export const InvokeQueueBackButton = memo(() => {
+  const isLoadingDynamicPrompts = useAppSelector(
+    (state) => state.dynamicPrompts.isLoading
+  );
   const { queueBack, isLoading, isDisabled } = useQueueBack();
   const { iterations, step, fineStep } = useAppSelector(selector);
   const dispatch = useAppDispatch();
@@ -73,7 +76,8 @@ export const InvokeQueueBackButton = memo(() => {
       </IAIInformationalPopover>
       <InvButton
         onClick={queueBack}
-        isLoading={isLoading}
+        isLoading={isLoading || isLoadingDynamicPrompts}
+        loadingText={invoke}
         isDisabled={isDisabled}
         rightIcon={<IoSparkles />}
         tooltip={<QueueButtonTooltip />}
@@ -83,8 +87,10 @@ export const InvokeQueueBackButton = memo(() => {
         size="lg"
         w="calc(100% - 60px)"
         flexShrink={0}
+        justifyContent="space-between"
+        spinnerPlacement="end"
       >
-        {invoke}
+        <span>{invoke}</span>
         <Spacer />
       </InvButton>
     </Flex>