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,73 +313,78 @@ const CreateAppsPage = () => {
                   />
                 </Flex>
               </Flex>
-              <SimpleGrid columns={[1, 3]} gridGap={2.5}>
-                {templateData.list.map((item) => (
-                  <Card
-                    key={item.templateId}
-                    p={4}
-                    borderRadius={'10px'}
-                    border={'1px solid'}
-                    borderColor={'myGray.200'}
-                    cursor={'pointer'}
-                    boxShadow={'none'}
-                    _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))}
-                  >
-                    <Box
-                      position={'relative'}
-                      h={28}
-                      borderRadius={'12px'}
-                      overflow={'hidden'}
-                      mb={2}
-                    >
-                      <Avatar
-                        src={item.avatar}
-                        position={'absolute'}
-                        w={'full'}
-                        opacity={0.5}
-                        top={'50%'}
-                        transform={'translate(0, -50%)'}
-                        filter={'blur(20px)'}
-                        zIndex={0}
-                      />
-                      <Box
-                        position={'absolute'}
-                        top={0}
-                        left={0}
-                        right={0}
-                        bottom={0}
-                        opacity={0.08}
-                        background={
-                          'linear-gradient(180deg, rgba(51, 51, 51, 0.00) 50%, #333 131.5%)'
+              <Fade in={!isLoadingTemplates && templateData?.list && templateData.list.length > 0}>
+                <SimpleGrid columns={[1, 3]} gridGap={2.5}>
+                  {templateData.list.map((item) => (
+                    <MyBox
+                      key={item.templateId}
+                      p={4}
+                      borderRadius={'10px'}
+                      border={'1px solid'}
+                      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)'
+                      }}
+                      isLoading={creatingTemplateId === item.templateId}
+                      onClick={() => {
+                        if (!creatingTemplateId) {
+                          handleSubmit((data) => onClickCreate(data, item.templateId))();
                         }
-                        zIndex={1}
-                      />
-
+                      }}
+                    >
                       <Box
-                        position={'absolute'}
-                        top={'50%'}
-                        left={'50%'}
-                        transform={'translate(-50%, -50%)'}
-                        zIndex={2}
+                        position={'relative'}
+                        h={28}
+                        borderRadius={'12px'}
+                        overflow={'hidden'}
+                        mb={2}
                       >
-                        <Avatar src={item.avatar} w={6} borderRadius={'4px'} />
+                        <Avatar
+                          src={item.avatar}
+                          position={'absolute'}
+                          w={'full'}
+                          opacity={0.5}
+                          top={'50%'}
+                          transform={'translate(0, -50%)'}
+                          filter={'blur(20px)'}
+                          zIndex={0}
+                        />
+                        <Box
+                          position={'absolute'}
+                          top={0}
+                          left={0}
+                          right={0}
+                          bottom={0}
+                          opacity={0.08}
+                          background={
+                            'linear-gradient(180deg, rgba(51, 51, 51, 0.00) 50%, #333 131.5%)'
+                          }
+                          zIndex={1}
+                        />
+
+                        <Box
+                          position={'absolute'}
+                          top={'50%'}
+                          left={'50%'}
+                          transform={'translate(-50%, -50%)'}
+                          zIndex={2}
+                        >
+                          <Avatar src={item.avatar} w={6} borderRadius={'4px'} />
+                        </Box>
                       </Box>
-                    </Box>
 
-                    <Box color={'myGray.900'}>{t(item.name as any)}</Box>
-                    <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>
-                ))}
-              </SimpleGrid>
+                      <Box color={'myGray.900'}>{t(item.name as any)}</Box>
+                      <Box fontSize={'mini'} color={'myGray.500'} flex={1} noOfLines={2} mt={1}>
+                        {t(item.intro as any)}
+                      </Box>
+                    </MyBox>
+                  ))}
+                </SimpleGrid>
+              </Fade>
             </Box>
           )}