Align ROFL app header with updated designs

Author: buberdds

src/app/pages/RoflAppDetailsPage/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { formatDistanceStrict } from 'date-fns'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
+import Skeleton from '@mui/material/Skeleton'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
 import { Layer, RoflApp, useGetRuntimeRoflAppsId } from '../../../oasis-nexus/api'
@@ -48,7 +49,12 @@ export const RoflAppDetailsPage: FC = () => {
 
   return (
     <PageLayout>
-      <SubPageCard featured title={roflApp?.metadata['net.oasis.rofl.name'] || t('rofl.header')}>
+      <SubPageCard
+        featured
+        title={
+          isLoading ? <Skeleton variant="text" /> : roflApp?.metadata['net.oasis.rofl.name'] || roflApp?.id
+        }
+      >
         <RoflAppDetailsView detailsPage isLoading={isLoading} app={roflApp} />
       </SubPageCard>
       <Grid container spacing={4}>

src/locales/en/translation.json

@@ -704,8 +704,7 @@
     "adminAccount": "Admin account",
     "stakedAmount": "Staked amount",
     "endorsement": "Endorsement",
-    "secrets": "Secrets",
-    "header": "ROFL App"
+    "secrets": "Secrets"
   },
   "search": {
     "placeholder": "Address, Block, Contract, Transaction hash, Token name, etc.",