feat: convert components to dynamic imports for improved performance (#22614)

web/app/components/apps/empty.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const DefaultCards = React.memo(() => {
+  const renderArray = Array.from({ length: 36 })
+  return (
+    <>
+      {
+        renderArray.map((_, index) => (
+          <div
+            key={index}
+            className='inline-flex h-[160px] rounded-xl bg-background-default-lighter'
+          />
+        ))
+      }
+    </>
+  )
+})
+
+const Empty = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <DefaultCards />
+      <div className='absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
+        <span className='system-md-medium text-text-tertiary'>
+          {t('app.newApp.noAppsFound')}
+        </span>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Empty)