Web:Client:AccountsHome: fix filter loader

This commit is contained in:
TimofeyBoyko 2022-09-14 16:55:23 +03:00
parent 11ba9f379c
commit ee7db82c3a
5 changed files with 55 additions and 39 deletions

View File

@ -338,6 +338,7 @@ const SectionFilterContent = ({
viewAs={viewAs}
viewSelectorVisible={false}
removeSelectedItem={removeSelectedItem}
isAccounts={true}
/>
) : (
<Loaders.Filter />

View File

@ -41,6 +41,7 @@ const FilterInput = React.memo(
isPersonalRoom,
isRooms,
isAccounts,
}) => {
const [viewSettings, setViewSettings] = React.useState([]);
const [inputValue, setInputValue] = React.useState("");
@ -122,6 +123,7 @@ const FilterInput = React.memo(
selectorLabel={selectorLabel}
isPersonalRoom={isPersonalRoom}
isRooms={isRooms}
isAccounts={isAccounts}
/>
{!isRecentFolder && (
<SortButton

View File

@ -33,6 +33,7 @@ const FilterBlock = ({
selectorLabel,
isPersonalRoom,
isRooms,
isAccounts,
}) => {
const [showSelector, setShowSelector] = React.useState({
show: false,
@ -387,6 +388,7 @@ const FilterBlock = ({
<Loaders.FilterBlock
isPersonalRoom={isPersonalRoom}
isRooms={isRooms}
isAccounts={isAccounts}
/>
) : (
<Scrollbar className="filter-body__scrollbar" stype="mediumBlack">

View File

@ -20,6 +20,7 @@ const FilterButton = ({
isPersonalRoom,
isRooms,
isAccounts,
}) => {
const [showFilterBlock, setShowFilterBlock] = React.useState(false);
@ -47,6 +48,7 @@ const FilterButton = ({
selectorLabel={selectorLabel}
isPersonalRoom={isPersonalRoom}
isRooms={isRooms}
isAccounts={isAccounts}
/>
)}
</>

View File

@ -10,11 +10,12 @@ const FilterBlockLoader = ({
style,
isPersonalRoom,
isRooms,
isAccounts,
...rest
}) => {
return (
<StyledContainer id={id} className={className} style={style} {...rest}>
{!isRooms && (
{!isRooms && !isAccounts && (
<StyledBlock>
<RectangleLoader
width={"50"}
@ -45,7 +46,7 @@ const FilterBlockLoader = ({
</StyledBlock>
)}
{!isPersonalRoom && (
{!isPersonalRoom && !isAccounts && (
<StyledBlock>
<RectangleLoader
width={"50"}
@ -84,7 +85,7 @@ const FilterBlockLoader = ({
</StyledBlock>
)}
{isRooms && (
{(isRooms || isAccounts) && (
<StyledBlock>
<RectangleLoader
width={"50"}
@ -111,24 +112,28 @@ const FilterBlockLoader = ({
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
{!isAccounts && (
<>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
</>
)}
</div>
</StyledBlock>
)}
@ -159,24 +164,28 @@ const FilterBlockLoader = ({
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
{!isAccounts && (
<>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
<RectangleLoader
width={"79"}
height={"28"}
borderRadius={"16"}
className={"loader-item tag-item"}
/>
</>
)}
</div>
</StyledBlock>
</StyledContainer>