refactor: improve message display logic in AppMessagesBalance component

- Refactored the message display logic in the `AppMessagesBalance` component to conditionally render the message count and loading state more clearly.
- Enhanced the layout by ensuring the `Text` component is only rendered when not loading, improving readability and user experience.

These changes streamline the component's rendering process and provide clearer visual feedback regarding message availability.

Author: mois-ilya

src/pages/app-messages/dashboard/AppMessagesBalance.tsx

@@ -14,10 +14,18 @@ const AppMessagesBalance: FC<BoxProps> = props => {
                 Available messages
             </Text>
             <Flex direction="column" gap="2">
-                <Text flex="1" mb="0" color={amount === 0 ? 'accent.red' : 'text.primary'} fontWeight={amount === 0 ? 'bold' : 'normal'}>
-                    {isLoading ? <Skeleton w="80px" h="6" /> : formatWithSuffix(amount || 0)}{' '}
-                    messages
-                </Text>
+                {isLoading ? (
+                    <Skeleton w="80px" h="6" />
+                ) : (
+                    <Text
+                        flex="1"
+                        mb="0"
+                        color={amount === 0 ? 'accent.red' : 'text.primary'}
+                        fontWeight={amount === 0 ? 'bold' : 'normal'}
+                    >
+                        {formatWithSuffix(amount || 0)} messages
+                    </Text>
+                )}
                 <Button w="100%" onClick={onOpen} size="lg" variant="primary">
                     Refill
                 </Button>