fix template creating (#5924)

projects/app/src/pages/dashboard/create/index.tsx

@@ -5,9 +5,7 @@ import {
   Flex,
   Button,
   Input,
-  Card,
   SimpleGrid,
-  Collapse,
   Table,
   Thead,
   Tbody,
@@ -15,7 +13,8 @@ import {
   Th,
   Td,
   TableContainer,
-  Center
+  Center,
+  Fade
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { postCreateApp } from '@/web/core/app/api';
@@ -33,7 +32,6 @@ import {
   getTemplateMarketItemDetail,
   getTemplateMarketItemList
 } from '@/web/core/app/api/template';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { createAppTypeMap } from '@/pageComponents/app/constants';
 import { serviceSideProps } from '@/web/common/i18n/utils';
 import MyImage from '@fastgpt/web/components/common/Image/MyImage';
@@ -44,6 +42,7 @@ import type { McpToolConfigType } from '@fastgpt/global/core/app/tool/mcpTool/ty
 import AppTypeCard from '@/pageComponents/app/create/AppTypeCard';
 import type { StoreSecretValueType } from '@fastgpt/global/common/secret/type';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import MyBox from '@fastgpt/web/components/common/MyBox';
 
 type FormType = {
   avatar: string;
@@ -66,7 +65,6 @@ export type CreateAppType =
 const CreateAppsPage = () => {
   const { t } = useTranslation();
   const router = useRouter();
-  const { feConfigs } = useSystemStore();
   const { isPc } = useSystem();
   const { query } = router;
   const { parentId, appType } = query;
@@ -74,9 +72,10 @@ const CreateAppsPage = () => {
   const [selectedAppType, setSelectedAppType] = useState<CreateAppType>(
     (appType as CreateAppType) || AppTypeEnum.workflow
   );
+  const [creatingTemplateId, setCreatingTemplateId] = useState<string | null>(null);
   const isToolType = ToolTypeList.includes(selectedAppType);
 
-  const { data: templateData } = useRequest2(
+  const { data: templateData, loading: isLoadingTemplates } = useRequest2(
     () => getTemplateMarketItemList({ isQuickTemplate: true, type: selectedAppType }),
     {
       manual: false,
@@ -122,6 +121,10 @@ const CreateAppsPage = () => {
       { avatar, name, createType, mcpUrl, mcpHeaderSecret, mcpToolList }: FormType,
       templateId?: string
     ): Promise<string> => {
+      if (templateId) {
+        setCreatingTemplateId(templateId);
+      }
+
       const appType = selectedAppType;
       const baseParams = {
         parentId: parentId as string,
@@ -310,9 +313,10 @@ const CreateAppsPage = () => {
                   />
                 </Flex>
               </Flex>
+              <Fade in={!isLoadingTemplates && templateData?.list && templateData.list.length > 0}>
                 <SimpleGrid columns={[1, 3]} gridGap={2.5}>
                   {templateData.list.map((item) => (
-                  <Card
+                    <MyBox
                       key={item.templateId}
                       p={4}
                       borderRadius={'10px'}
@@ -320,11 +324,17 @@ const CreateAppsPage = () => {
                       borderColor={'myGray.200'}
                       cursor={'pointer'}
                       boxShadow={'none'}
+                      bg={'white'}
                       _hover={{
                         boxShadow:
                           '0 4px 10px 0 rgba(19, 51, 107, 0.08), 0 0 1px 0 rgba(19, 51, 107, 0.08)'
                       }}
-                    onClick={handleSubmit((data) => onClickCreate(data, item.templateId))}
+                      isLoading={creatingTemplateId === item.templateId}
+                      onClick={() => {
+                        if (!creatingTemplateId) {
+                          handleSubmit((data) => onClickCreate(data, item.templateId))();
+                        }
+                      }}
                     >
                       <Box
                         position={'relative'}
@@ -371,12 +381,10 @@ const CreateAppsPage = () => {
                       <Box fontSize={'mini'} color={'myGray.500'} flex={1} noOfLines={2} mt={1}>
                         {t(item.intro as any)}
                       </Box>
-                    <Box fontSize={'mini'} color={'myGray.500'} mt={2}>
-                      by {item.author || feConfigs.systemTitle}
-                    </Box>
-                  </Card>
+                    </MyBox>
                   ))}
                 </SimpleGrid>
+              </Fade>
             </Box>
           )}