integration list placeholder

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -1,5 +1,6 @@
 import { type VFC } from 'react';
 import type { AddonTypeSchema } from 'openapi';
+import useLoading from 'hooks/useLoading';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
@@ -7,13 +8,19 @@ import { StyledCardsGrid } from '../IntegrationList.styles';
 
 interface IAvailableIntegrationsProps {
     providers: AddonTypeSchema[];
+    loading?: boolean;
 }
 export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
     providers,
+    loading,
 }) => {
+    const ref = useLoading(loading || false);
     return (
-        <PageContent header={<PageHeader title="Available integrations" />}>
-            <StyledCardsGrid>
+        <PageContent
+            header={<PageHeader title="Available integrations" />}
+            isLoading={loading}
+        >
+            <StyledCardsGrid ref={ref}>
                 {providers?.map(({ name, displayName, description }) => (
                     <IntegrationCard
                         key={name}

frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx

@@ -1,62 +1,59 @@
-import { Table, TableBody, TableCell, TableRow } from 'component/common/Table';
-import { useMemo, useState, useCallback } from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { AddonSchema, AddonTypeSchema } from 'openapi';
+import useLoading from 'hooks/useLoading';
 import { PageContent } from 'component/common/PageContent/PageContent';
-import useAddons from 'hooks/api/getters/useAddons/useAddons';
-import useToast from 'hooks/useToast';
-import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
-import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { formatUnknownError } from 'utils/formatUnknownError';
-import { sortTypes } from 'utils/sortTypes';
-import { useTable, useSortBy } from 'react-table';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { SortableTableHeader, TablePlaceholder } from 'component/common/Table';
-import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
-import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
-import { IntegrationNameCell } from '../IntegrationNameCell/IntegrationNameCell';
 import { StyledCardsGrid } from '../IntegrationList.styles';
 import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
+import { VFC } from 'react';
 
-export const ConfiguredIntegrations = () => {
-    const { refetchAddons, addons, loading } = useAddons();
-    const { updateAddon, removeAddon } = useAddonsApi();
-    const { setToastData, setToastApiError } = useToast();
-    const [showDelete, setShowDelete] = useState(false);
-
-    const data = useMemo(() => {
-        if (loading) {
-            return Array(5).fill({
-                name: 'Addon name',
-                description: 'Addon description when loading',
-            });
-        }
-
-        return addons.map(addon => ({
-            ...addon,
-        }));
-    }, [addons, loading]);
+type ConfiguredIntegrationsProps = {
+    loading: boolean;
+    addons: AddonSchema[];
+    providers: AddonTypeSchema[];
+};
 
+export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
+    loading,
+    addons,
+    providers,
+}) => {
     const counter = addons.length ? `(${addons.length})` : '';
+    const ref = useLoading(loading || false);
 
     return (
         <PageContent
-            isLoading={loading}
             header={<PageHeader title={`Configured integrations ${counter}`} />}
             sx={theme => ({ marginBottom: theme.spacing(2) })}
+            isLoading={loading}
         >
-            <StyledCardsGrid>
-                {addons?.map(({ id, enabled, provider, description }) => (
-                    <IntegrationCard
-                        key={id}
-                        id={id}
-                        icon={provider}
-                        title={provider}
-                        isEnabled={enabled}
-                        description={description || ''}
-                        isConfigured
-                        link={`/integrations/edit/${id}`}
-                    />
-                ))}
+            <StyledCardsGrid ref={ref}>
+                {addons?.map(
+                    ({
+                        id,
+                        enabled,
+                        provider,
+                        description,
+                        // events,
+                        // projects,
+                    }) => {
+                        const providerConfig = providers.find(
+                            item => item.name === provider
+                        );
+
+                        return (
+                            <IntegrationCard
+                                key={id}
+                                id={id}
+                                icon={provider}
+                                title={providerConfig?.displayName || provider}
+                                isEnabled={enabled}
+                                description={description || ''}
+                                isConfigured
+                                link={`/integrations/edit/${id}`}
+                            />
+                        );
+                    }
+                )}
             </StyledCardsGrid>
         </PageContent>
     );

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx

@@ -1,4 +1,4 @@
-import { useState, VFC } from 'react';
+import { VFC } from 'react';
 import { Link } from 'react-router-dom';
 import { styled, Typography } from '@mui/material';
 import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
@@ -68,24 +68,30 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
     return (
         <StyledLink to={link}>
             <StyledHeader>
-                <StyledTitle variant="h3">
+                <StyledTitle variant="h3" data-loading>
                     <IntegrationIcon name={icon as string} /> {title}
                 </StyledTitle>
                 <ConditionallyRender
                     condition={isEnabled === true}
-                    show={<Badge color="success">Enabled</Badge>}
+                    show={
+                        <Badge color="success" data-loading>
+                            Enabled
+                        </Badge>
+                    }
                 />
                 <ConditionallyRender
                     condition={isEnabled === false}
-                    show={<Badge>Disabled</Badge>}
+                    show={<Badge data-loading>Disabled</Badge>}
                 />
                 <ConditionallyRender
                     condition={isConfigured}
                     show={<IntegrationCardMenu id={id as string} />}
                 />
             </StyledHeader>
-            <Typography variant="body1">{description}</Typography>
-            <StyledAction>
+            <Typography variant="body1" data-loading>
+                {description}
+            </Typography>
+            <StyledAction data-loading>
                 {configureActionText} <ChevronRightIcon />
             </StyledAction>
         </StyledLink>

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx

@@ -56,6 +56,7 @@ export const IntegrationCardMenu: VFC<IIntegrationCardMenuProps> = ({ id }) => {
                     aria-controls={open ? 'actions-menu' : undefined}
                     aria-haspopup="true"
                     aria-expanded={open ? 'true' : undefined}
+                    data-loading
                 >
                     <MoreVertIcon sx={{ width: 32, height: 32 }} />
                 </IconButton>

frontend/src/component/integrations/IntegrationList/IntegrationList.tsx

@@ -3,17 +3,36 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import useAddons from 'hooks/api/getters/useAddons/useAddons';
 import { AvailableIntegrations } from './AvailableIntegrations/AvailableIntegrations';
 import { ConfiguredIntegrations } from './ConfiguredIntegrations/ConfiguredIntegrations';
+import { AddonSchema } from 'openapi';
 
 export const IntegrationList: VFC = () => {
     const { providers, addons, loading } = useAddons();
 
+    const loadingPlaceholderAddons: AddonSchema[] = Array.from({ length: 4 })
+        .fill({})
+        .map((_, id) => ({
+            id,
+            provider: 'mock',
+            description: 'mock integratino',
+            events: [],
+            projects: [],
+            parameters: {},
+            enabled: false,
+        }));
+
     return (
         <>
             <ConditionallyRender
                 condition={addons.length > 0}
-                show={<ConfiguredIntegrations />}
+                show={
+                    <ConfiguredIntegrations
+                        addons={loading ? loadingPlaceholderAddons : addons}
+                        providers={providers}
+                        loading={loading}
+                    />
+                }
             />
-            <AvailableIntegrations providers={providers} />
+            <AvailableIntegrations providers={providers} loading={loading} />
         </>
     );
 };