Skip to content

Commit

Permalink
display nicer loading message for the pdf opening
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackforestboi
blackforestboi committed Feb 25, 2024
1 parent a78d9d0 commit b69f822
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 147 deletions.
2 changes: 1 addition & 1 deletion external/@worldbrain/memex-common
Submodule memex-common updated from 7e1d55 to 681eca
12 changes: 6 additions & 6 deletions src/dashboard-refactor/logic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -940,7 +940,7 @@ export class DashboardLogic extends UILogic<State, Events> {
event,
}) => {
const previousResults =
previousState.searchResults.results[-1].pages.byId
previousState.searchResults.results[-1]?.pages.byId

const focusedItemIndex = Object.keys(previousResults).findIndex(
(key) => previousResults[key].isInFocus === true,
Expand Down Expand Up @@ -1677,7 +1677,7 @@ export class DashboardLogic extends UILogic<State, Events> {
$set: filterOutPage(
previousState.searchResults.results[
PAGE_SEARCH_DUMMY_DAY
].pages.allIds,
]?.pages.allIds,
),
},
},
Expand Down Expand Up @@ -2009,7 +2009,7 @@ export class DashboardLogic extends UILogic<State, Events> {

let templateCopyResult
if (
!previousState.searchResults.results[event.day].pages.byId[
!previousState.searchResults.results[event.day]?.pages.byId[
event.pageId
].isCopyPasterShown
) {
Expand Down Expand Up @@ -2236,7 +2236,7 @@ export class DashboardLogic extends UILogic<State, Events> {
previousState,
}) => {
const { searchResults } = previousState
const page = searchResults.results[event.day].pages.byId[event.pageId]
const page = searchResults.results[event.day]?.pages.byId[event.pageId]

const sortedNoteIds = page.noteIds[page.notesType].sort((a, b) =>
event.sortingFn(
Expand Down Expand Up @@ -2286,10 +2286,10 @@ export class DashboardLogic extends UILogic<State, Events> {

setPageHover: EventHandler<'setPageHover'> = ({ event, previousState }) => {
if (
previousState.searchResults.results[event.day].pages.byId[
previousState.searchResults.results[event.day]?.pages.byId[
event.pageId
].isCopyPasterShown ||
previousState.searchResults.results[event.day].pages.byId[
previousState.searchResults.results[event.day]?.pages.byId[
event.pageId
].listPickerShowStatus !== 'hide'
) {
Expand Down
284 changes: 144 additions & 140 deletions src/dashboard-refactor/search-results/components/page-result.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -741,152 +741,144 @@ export default class PageResultView extends PureComponent<Props> {
hoverState={this.props.isInFocus}
onRef={this.itemBoxRef} // Passing the ref as a prop
>
{this.props.uploadedPdfLinkLoadState === 'running' ? (
{this.props.uploadedPdfLinkLoadState === 'running' && (
<LoadingBox>
<LoadingIndicator size={30} />
Loading PDF
</LoadingBox>
) : (
<StyledPageResult>
<PageContentBox
// onMouseOver={this.props.onMainContentHover}
// onMouseLeave={
// this.props.listPickerShowStatus !== 'hide'
// ? this.listPickerBtnClickHandler
// : undefined
// }
tabIndex={-1}
hasSpaces={this.displayLists.length > 0}
>
{this.props.hoverState != null ||
this.props.isBulkSelected ? (
<PageActionBox>
{this.props.hoverState != null && (
<ExtraButtonsActionBar>
{' '}
<Icon
heightAndWidth="20px"
filePath={icons.edit}
onClick={() => {
this.props.onEditTitleChange(
)}
<StyledPageResult>
<PageContentBox
// onMouseOver={this.props.onMainContentHover}
// onMouseLeave={
// this.props.listPickerShowStatus !== 'hide'
// ? this.listPickerBtnClickHandler
// : undefined
// }
tabIndex={-1}
hasSpaces={this.displayLists.length > 0}
>
{this.props.hoverState != null ||
this.props.isBulkSelected ? (
<PageActionBox>
{this.props.hoverState != null && (
<ExtraButtonsActionBar>
{' '}
<Icon
heightAndWidth="20px"
filePath={icons.edit}
onClick={() => {
this.props.onEditTitleChange(
this.props.normalizedUrl,
this.props.fullTitle ??
this.props
.normalizedUrl,
this.props.fullTitle ??
this.props
.normalizedUrl,
)
}}
/>
<Icon
heightAndWidth="20px"
filePath={icons.trash}
onClick={
this.props.onTrashBtnClick
}
/>
</ExtraButtonsActionBar>
)}

{this.renderBulkSelectBtn()}
</PageActionBox>
) : undefined}

<BlockContent
type={this.props.type}
normalizedUrl={this.props.normalizedUrl}
originalUrl={this.fullUrl}
onClick={this.props.onClick}
fullTitle={this.props.fullTitle}
pdfUrl={this.props.fullPdfUrl}
favIcon={this.props.favIconURI}
inPageMode={this.props.inPageMode}
youtubeService={this.props.youtubeService}
removeFromList={this.renderRemoveFromListBtn()}
mainContentHover={
this.props.hoverState != null
? this.props.hoverState
: undefined
}
renderCreationInfo={() => {
return this.props.displayTime ? (
<CreationInfo
createdWhen={this.props.displayTime}
)
}}
/>
) : null
}}
memexIcon={MemexIcon}
getRootElement={this.props.getRootElement}
onEditTitleChange={(changedTitle) => {
this.props.onEditTitleChange(
this.props.normalizedUrl,
changedTitle,
)
}}
onEditTitleSave={(changedTitle) => {
this.props.onEditTitleSave(
this.props.normalizedUrl,
changedTitle,
)
}}
editTitleState={this.props.editTitleState}
/>
</PageContentBox>
{this.displayLists.length > 0 && (
<ListsSegment
lists={this.displayLists}
onListClick={(listId) => {
this.props.filterbyList(listId)
}}
onEditBtnClick={
this.props.onListPickerBarBtnClick
}
renderSpacePicker={
this.props.listPickerShowStatus ===
'lists-bar'
? this.renderSpacePicker
: null
<Icon
heightAndWidth="20px"
filePath={icons.trash}
onClick={this.props.onTrashBtnClick}
/>
</ExtraButtonsActionBar>
)}

{this.renderBulkSelectBtn()}
</PageActionBox>
) : undefined}

<BlockContent
type={this.props.type}
normalizedUrl={this.props.normalizedUrl}
originalUrl={this.fullUrl}
onClick={this.props.onClick}
fullTitle={this.props.fullTitle}
pdfUrl={this.props.fullPdfUrl}
favIcon={this.props.favIconURI}
inPageMode={this.props.inPageMode}
youtubeService={this.props.youtubeService}
removeFromList={this.renderRemoveFromListBtn()}
mainContentHover={
this.props.hoverState != null
? this.props.hoverState
: undefined
}
renderCreationInfo={() => {
return this.props.displayTime ? (
<CreationInfo
createdWhen={this.props.displayTime}
/>
) : null
}}
memexIcon={MemexIcon}
getRootElement={this.props.getRootElement}
onEditTitleChange={(changedTitle) => {
this.props.onEditTitleChange(
this.props.normalizedUrl,
changedTitle,
)
}}
onEditTitleSave={(changedTitle) => {
this.props.onEditTitleSave(
this.props.normalizedUrl,
changedTitle,
)
}}
editTitleState={this.props.editTitleState}
/>
</PageContentBox>
{this.displayLists.length > 0 && (
<ListsSegment
lists={this.displayLists}
onListClick={(listId) => {
this.props.filterbyList(listId)
}}
onEditBtnClick={this.props.onListPickerBarBtnClick}
renderSpacePicker={
this.props.listPickerShowStatus === 'lists-bar'
? this.renderSpacePicker
: null
}
filteredbyListID={this.props.filteredbyListID}
padding={'0px 20px 0px 20px'}
spacePickerButtonRef={this.spacePickerBarRef}
/>
)}
{this.props.searchQuery?.length > 0 &&
this.props.text?.length > 0 && (
<ResultsMatchingTextToggleContainer
showAll={this.props.showAllResults}
id={
'matching-text-container-' +
this.props.index
}
filteredbyListID={this.props.filteredbyListID}
padding={'0px 20px 0px 20px'}
spacePickerButtonRef={this.spacePickerBarRef}
/>
maxHeight={this.maxMatchingTextContainerHeight}
>
<SearchResultsHighlights>
{this.processPageText(this.props.text)}
</SearchResultsHighlights>
{this.renderToggleMatchesButton()}
</ResultsMatchingTextToggleContainer>
)}
{this.props.searchQuery?.length > 0 &&
this.props.text?.length > 0 && (
<ResultsMatchingTextToggleContainer
showAll={this.props.showAllResults}
id={
'matching-text-container-' +
this.props.index
}
maxHeight={
this.maxMatchingTextContainerHeight
}
>
<SearchResultsHighlights>
{this.processPageText(this.props.text)}
</SearchResultsHighlights>
{this.renderToggleMatchesButton()}
</ResultsMatchingTextToggleContainer>
)}
<FooterBar inPageMode={this.props.inPageMode}>
<ItemBoxBottom
// firstDivProps={{
// onMouseEnter: this.props.onFooterHover,
// onMouseOver: this.props.onFooterHover,
// }}
creationInfo={{
createdWhen: this.props.displayTime,
}}
actions={this.calcFooterActions()}
spacesButton={this.renderSpacesButton()}
getRootElement={this.props.getRootElement}
inPageMode={this.props.inPageMode}
/>
</FooterBar>
{this.renderSpacePicker()}
{this.renderPageCitationsDropdown()}
</StyledPageResult>
)}
<FooterBar inPageMode={this.props.inPageMode}>
<ItemBoxBottom
// firstDivProps={{
// onMouseEnter: this.props.onFooterHover,
// onMouseOver: this.props.onFooterHover,
// }}
creationInfo={{
createdWhen: this.props.displayTime,
}}
actions={this.calcFooterActions()}
spacesButton={this.renderSpacesButton()}
getRootElement={this.props.getRootElement}
inPageMode={this.props.inPageMode}
/>
</FooterBar>
{this.renderSpacePicker()}
{this.renderPageCitationsDropdown()}
</StyledPageResult>
</ItemBox>
)
}
Expand Down Expand Up @@ -980,11 +972,23 @@ const PageContentBox = styled.div<{ hasSpaces: boolean }>`
`

const LoadingBox = styled.div`
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 100%;
flex-direction: column;
grid-gap: 15px;
color: ${(props) => props.theme.colors.greyScale7};
font-size: 16px;
font-weight: 300;
background: ${(props) => props.theme.colors.greyScale1}98;
backdrop-filter: blur(5px);
z-index: 10000000;
`

const PageActionBox = styled.div`
Expand Down

0 comments on commit b69f822

Please sign in to comment.