diff --git a/app/client/src/ce/pages/Applications/ApplicationCardList.tsx b/app/client/src/ce/pages/Applications/ApplicationCardList.tsx
index 5d0f95ba99..a6fbfcd626 100644
--- a/app/client/src/ce/pages/Applications/ApplicationCardList.tsx
+++ b/app/client/src/ce/pages/Applications/ApplicationCardList.tsx
@@ -3,13 +3,8 @@ import { Button } from "design-system";
 import { importSvg } from "design-system-old";
 import { useSelector } from "react-redux";
 
-import {
-  CardListContainer,
-  CardListWrapper,
-  PaddingWrapper,
-  ResourceHeading,
-  Space,
-} from "pages/Applications/CommonElements";
+import CardList from "pages/Applications/CardList";
+import { PaddingWrapper } from "pages/Applications/CommonElements";
 import {
   getIsCreatingApplicationByWorkspaceId,
   getIsFetchingApplications,
@@ -55,51 +50,51 @@ function ApplicationCardList({
   const isFetchingApplications = useSelector(getIsFetchingApplications);
 
   return (
-    <CardListContainer isMobile={isMobile}>
-      <ResourceHeading isLoading={isFetchingApplications}>Apps</ResourceHeading>
-      <Space />
-      <CardListWrapper isMobile={isMobile} key={workspaceId}>
-        {applications.map((application: any) => {
-          return (
-            <PaddingWrapper isMobile={isMobile} key={application.id}>
-              <ApplicationCard
-                application={application}
-                delete={deleteApplication}
-                enableImportExport={enableImportExport}
-                isFetchingApplications={isFetchingApplications}
-                isMobile={isMobile}
-                key={application.id}
-                permissions={{
-                  hasCreateNewApplicationPermission,
-                  hasManageWorkspacePermissions,
-                  canInviteToWorkspace,
-                }}
-                update={updateApplicationDispatch}
-                workspaceId={workspaceId}
-              />
-            </PaddingWrapper>
-          );
-        })}
-        {applications.length === 0 && (
-          <NoAppsFound>
-            <NoAppsFoundIcon />
-            <span>There’s nothing inside this workspace</span>
-            {/* below component is duplicate. This is because of cypress test were failing */}
-            {hasCreateNewApplicationPermission && (
-              <Button
-                className="t--new-button createnew"
-                isLoading={isCreatingApplication}
-                onClick={() => onClickAddNewButton(workspaceId)}
-                size="md"
-                startIcon={"plus"}
-              >
-                New
-              </Button>
-            )}
-          </NoAppsFound>
-        )}
-      </CardListWrapper>
-    </CardListContainer>
+    <CardList
+      isLoading={isFetchingApplications}
+      isMobile={isMobile}
+      title="Apps"
+    >
+      {applications.map((application: any) => {
+        return (
+          <PaddingWrapper isMobile={isMobile} key={application.id}>
+            <ApplicationCard
+              application={application}
+              delete={deleteApplication}
+              enableImportExport={enableImportExport}
+              isFetchingApplications={isFetchingApplications}
+              isMobile={isMobile}
+              key={application.id}
+              permissions={{
+                hasCreateNewApplicationPermission,
+                hasManageWorkspacePermissions,
+                canInviteToWorkspace,
+              }}
+              update={updateApplicationDispatch}
+              workspaceId={workspaceId}
+            />
+          </PaddingWrapper>
+        );
+      })}
+      {applications.length === 0 && (
+        <NoAppsFound>
+          <NoAppsFoundIcon />
+          <span>There’s nothing inside this workspace</span>
+          {/* below component is duplicate. This is because of cypress test were failing */}
+          {hasCreateNewApplicationPermission && (
+            <Button
+              className="t--new-button createnew"
+              isLoading={isCreatingApplication}
+              onClick={() => onClickAddNewButton(workspaceId)}
+              size="md"
+              startIcon={"plus"}
+            >
+              New
+            </Button>
+          )}
+        </NoAppsFound>
+      )}
+    </CardList>
   );
 }
 
diff --git a/app/client/src/ce/pages/Applications/ResourceListLoader.tsx b/app/client/src/ce/pages/Applications/ResourceListLoader.tsx
new file mode 100644
index 0000000000..86462f596f
--- /dev/null
+++ b/app/client/src/ce/pages/Applications/ResourceListLoader.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { noop } from "lodash";
+
+import Card from "components/common/Card";
+import CardList from "pages/Applications/CardList";
+import { Button } from "design-system";
+import { PaddingWrapper } from "pages/Applications/CommonElements";
+import type { ApplicationPayload } from "@appsmith/constants/ReduxActionConstants";
+
+type ResourcesLoaderProps = {
+  isMobile: boolean;
+  resources: ApplicationPayload[];
+};
+
+const DEFAULT_BACKGROUND_COLOR = "#9747FF1A";
+const DEFAULT_ICON = "book";
+
+function ResourceListLoader({ isMobile, resources }: ResourcesLoaderProps) {
+  return (
+    <CardList isLoading isMobile={isMobile} title="Apps">
+      {resources.map((resource: any) => {
+        return (
+          <PaddingWrapper isMobile={isMobile} key={resource.id}>
+            <Card
+              backgroundColor={DEFAULT_BACKGROUND_COLOR}
+              contextMenu={null}
+              editedByText=""
+              hasReadPermission
+              icon={DEFAULT_ICON}
+              isContextMenuOpen={false}
+              isFetching
+              isMobile={isMobile}
+              moreActionItems={[]}
+              primaryAction={noop}
+              setShowOverlay={noop}
+              showGitBadge={false}
+              showOverlay={false}
+              testId="t--package-card"
+              title={resource.name}
+              titleTestId="t--app-card-name"
+            >
+              <Button
+                className="t--package-edit-link"
+                href={"/"}
+                size="md"
+                startIcon={"pencil-line"}
+              >
+                Edit
+              </Button>
+            </Card>
+          </PaddingWrapper>
+        );
+      })}
+    </CardList>
+  );
+}
+
+export default ResourceListLoader;
diff --git a/app/client/src/ce/pages/Applications/index.tsx b/app/client/src/ce/pages/Applications/index.tsx
index ec5c7da248..8e47b64d55 100644
--- a/app/client/src/ce/pages/Applications/index.tsx
+++ b/app/client/src/ce/pages/Applications/index.tsx
@@ -98,6 +98,7 @@ import ApplicationCardList from "@appsmith/pages/Applications/ApplicationCardLis
 import { usePackage } from "@appsmith/pages/Applications/helpers";
 import PackageCardList from "@appsmith/pages/Applications/PackageCardList";
 import WorkspaceAction from "@appsmith/pages/Applications/WorkspaceAction";
+import ResourceListLoader from "@appsmith/pages/Applications/ResourceListLoader";
 
 export const { cloudHosting } = getAppsmithConfigs();
 
@@ -710,20 +711,28 @@ export function ApplicationsSection(props: any) {
                   </WorkspaceShareUsers>
                 )}
               </WorkspaceDropDown>
-              <ApplicationCardList
-                applications={applications}
-                canInviteToWorkspace={canInviteToWorkspace}
-                deleteApplication={deleteApplication}
-                enableImportExport={enableImportExport}
-                hasCreateNewApplicationPermission={
-                  hasCreateNewApplicationPermission
-                }
-                hasManageWorkspacePermissions={hasManageWorkspacePermissions}
-                isMobile={isMobile}
-                onClickAddNewButton={onClickAddNewAppButton}
-                updateApplicationDispatch={updateApplicationDispatch}
-                workspaceId={workspace.id}
-              />
+              {isLoadingResources && (
+                <ResourceListLoader
+                  isMobile={isMobile}
+                  resources={applications}
+                />
+              )}
+              {!isLoadingResources && (
+                <ApplicationCardList
+                  applications={applications}
+                  canInviteToWorkspace={canInviteToWorkspace}
+                  deleteApplication={deleteApplication}
+                  enableImportExport={enableImportExport}
+                  hasCreateNewApplicationPermission={
+                    hasCreateNewApplicationPermission
+                  }
+                  hasManageWorkspacePermissions={hasManageWorkspacePermissions}
+                  isMobile={isMobile}
+                  onClickAddNewButton={onClickAddNewAppButton}
+                  updateApplicationDispatch={updateApplicationDispatch}
+                  workspaceId={workspace.id}
+                />
+              )}
               {!isLoadingResources && (
                 <PackageCardList
                   isMobile={isMobile}
diff --git a/app/client/src/ee/pages/Applications/ResourceListLoader.tsx b/app/client/src/ee/pages/Applications/ResourceListLoader.tsx
new file mode 100644
index 0000000000..8ca45c4d2e
--- /dev/null
+++ b/app/client/src/ee/pages/Applications/ResourceListLoader.tsx
@@ -0,0 +1,3 @@
+export * from "ce/pages/Applications/ResourceListLoader";
+import { default as CE_ResourceListLoader } from "ce/pages/Applications/ResourceListLoader";
+export default CE_ResourceListLoader;
diff --git a/app/client/src/pages/Applications/CardList.tsx b/app/client/src/pages/Applications/CardList.tsx
new file mode 100644
index 0000000000..550bd70ec8
--- /dev/null
+++ b/app/client/src/pages/Applications/CardList.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import {
+  CardListContainer,
+  CardListWrapper,
+  ResourceHeading,
+  Space,
+} from "pages/Applications/CommonElements";
+
+type CardListProps = React.PropsWithChildren<{
+  isLoading?: boolean;
+  isMobile?: boolean;
+  title: string;
+}>;
+
+function CardList({ children, isLoading, isMobile, title }: CardListProps) {
+  return (
+    <CardListContainer isMobile={isMobile}>
+      <ResourceHeading isLoading={isLoading}>{title}</ResourceHeading>
+      <Space />
+      <CardListWrapper isMobile={isMobile}>{children}</CardListWrapper>
+    </CardListContainer>
+  );
+}
+
+export default CardList;