(feat/environment-services-table): add loading + fix table spacing

libs/domains/application/src/lib/slices/applications.slice.ts

@@ -149,3 +149,6 @@ export const selectApplicationsEntitiesByEnvId = (state: RootState, environmentI
 
 export const selectApplicationById = (state: RootState, applicationId: string): ApplicationEntity | undefined =>
   getApplicationsState(state).entities[applicationId]
+
+export const applicationsLoadingStatus = (state: RootState): string | undefined =>
+  getApplicationsState(state).loadingStatus

libs/domains/environment/src/lib/slices/environments.slice.ts

@@ -115,3 +115,6 @@ export const selectEnvironmentsEntitiesByProjectId = (state: RootState, projectI
 
 export const selectEnvironmentById = (state: RootState, environmentId: string) =>
   getEnvironmentsState(state).entities[environmentId]
+
+export const environmentsLoadingStatus = (state: RootState): string | undefined =>
+  getEnvironmentsState(state).loadingStatus

libs/pages/applications/feature/src/lib/components/general/general.tsx

@@ -1,4 +1,8 @@
-import { selectApplicationsEntitiesByEnvId } from '@console/domains/application'
+import {
+  applicationFactoryMock,
+  applicationsLoadingStatus,
+  selectApplicationsEntitiesByEnvId,
+} from '@console/domains/application'
 import { GeneralPage } from '@console/pages/applications/ui'
 import { RootState } from '@console/shared/interfaces'
 import { Application } from 'qovery-typescript-axios'
@@ -7,11 +11,14 @@ import { useParams } from 'react-router'
 
 export function General() {
   const { environmentId = '' } = useParams()
+
+  const loadingApplications = applicationFactoryMock(3)
+  const loadingStatus = useSelector<RootState>((state) => applicationsLoadingStatus(state))
   const applicationsByEnv = useSelector<RootState, Application[]>((state: RootState) =>
     selectApplicationsEntitiesByEnvId(state, environmentId)
   )
 
-  return <GeneralPage applications={applicationsByEnv} />
+  return <GeneralPage applications={loadingStatus !== 'loaded' ? loadingApplications : applicationsByEnv} />
 }
 
 export default General

libs/pages/applications/ui/src/lib/components/table-row-applications/table-row-applications.tsx

@@ -46,12 +46,12 @@ export function TableRowApplications(props: TableRowApplicationsProps) {
   return (
     <TableRow columnsWidth={columnsWidth} link={link}>
       <>
-        <div className="flex items-center px-4">
+        <div className="flex items-center px-4 gap-1">
           <Skeleton show={isLoading} width={16} height={16}>
             <StatusChip status={data.status && data.status.state} />
           </Skeleton>
           <Skeleton show={isLoading} width={16} height={16}>
-            <Icon name={IconEnum.APPLICATION} width="28" className="mx-1" />
+            <Icon name={IconEnum.APPLICATION} width="28" />
           </Skeleton>
           <Skeleton show={isLoading} width={400} height={16} truncate>
             <span className="text-sm text-text-500 font-medium">{data.name}</span>

libs/pages/environments/feature/src/lib/components/general/general.tsx

@@ -1,19 +1,27 @@
-import { useEnvironments } from '@console/domains/projects'
 import { GeneralPage } from '@console/pages/environments/ui'
 import { useParams } from 'react-router'
 import { useSelector } from 'react-redux'
-import { selectEnvironmentsEntitiesByProjectId } from '@console/domains/environment'
+import {
+  environmentFactoryMock,
+  environmentsLoadingStatus,
+  selectEnvironmentsEntitiesByProjectId,
+} from '@console/domains/environment'
 import { RootState } from '@console/shared/interfaces'
 import { Environment } from 'qovery-typescript-axios'
+import { useState } from 'react'
 
 export function General() {
-  const { getEnvironmentsStatus } = useEnvironments()
   const { projectId = '' } = useParams()
+  const loadingEnvironments = environmentFactoryMock(3).map((env) => {
+    delete env.status
+    return env
+  })
+  const loadingStatus = useSelector<RootState>((state) => environmentsLoadingStatus(state))
   const environments = useSelector<RootState, Environment[]>((state) =>
     selectEnvironmentsEntitiesByProjectId(state, projectId)
   )
 
-  return <GeneralPage environments={environments} />
+  return <GeneralPage environments={loadingStatus !== 'loaded' ? loadingEnvironments : environments} />
 }
 
 export default General

libs/shared/ui/src/lib/components/tag-commit/tag-commit.tsx

@@ -30,9 +30,13 @@ export function TagCommit(props: TagCommitProps) {
   const contentTag = (
     <Tag className="border border-element-light-lighter-500 text-text-400 font-medium hover:bg-element-light-lighter-400 w-[70px] flex items-center justify-center">
       {!hover ? (
-        <Icon name="icon-solid-code-commit" className="mr-1 w-4" />
+        <div className="w-4 mr-1">
+          <Icon name="icon-solid-code-commit" className="mr-1" />
+        </div>
       ) : (
-        <Icon name="icon-solid-copy" className="mr-1 w-4" />
+        <div className="w-4 mr-1">
+          <Icon name="icon-solid-copy" className="mr-1" />
+        </div>
       )}
       {commitId.substring(0, 5)}
     </Tag>