Skip to content

F
frontend
Commit a0145950 authored by Max Alekseenko's avatar Max Alekseenko
Browse files
Options

add skeleton for image

parent d24eb6c4
Show whitespace changes
Inline Side-by-side
Showing with 7 additions and 2 deletions
ui/rewards/steps/LoginStepContent.tsx
View file @ a0145950
import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert } from '@chakra-ui/react'; import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert, Skeleton } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import React, { useCallback, useState, useEffect } from 'react'; import React, { useCallback, useState, useEffect } from 'react';
...@@ -74,7 +74,12 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => { ...@@ -74,7 +74,12 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
return ( return (
<> <>
<Image src="/static/merits_program.png" alt="Rewards program" mb={ 3 }/> <Image
src="/static/merits_program.png"
alt="Merits program"
mb={ 3 }
fallback={ <Skeleton w="full" h="120px" mb={ 3 }/> }
/>
<Box mb={ 6 }> <Box mb={ 6 }>
Merits are awarded for a variety of different Blockscout activities. Connect a wallet to get started. Merits are awarded for a variety of different Blockscout activities. Connect a wallet to get started.
<LinkExternal href="https://docs.blockscout.com/using-blockscout/my-account/merits" ml={ 1 } fontWeight="500"> <LinkExternal href="https://docs.blockscout.com/using-blockscout/my-account/merits" ml={ 1 } fontWeight="500">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment