github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-28 16:50:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(pin-button): add loading state

Browse source 
Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2023-10-29 20:37:22 +01:00
parent 217b42d76a
commit d8fdee8f41
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry/pin-note-sidebar-entry.tsx
View file

@ -10,9 +10,10 @@ import { useUiNotifications } from '../../../../notifications/ui-notification-bo
import { SidebarButton } from '../../sidebar-button/sidebar-button' import { SidebarButton } from '../../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../../types' import type { SpecificSidebarEntryProps } from '../../types'
import styles from './pin-note-sidebar-entry.module.css' import styles from './pin-note-sidebar-entry.module.css'
import React, { useCallback, useMemo } from 'react' import React, { useCallback, useMemo, useState } from 'react'
import { Pin as IconPin } from 'react-bootstrap-icons' import { Pin as IconPin } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import { WaitSpinner } from '../../../../common/wait-spinner/wait-spinner'
/** /**
* Sidebar entry button that toggles the pinned status of the current note in the history. * Sidebar entry button that toggles the pinned status of the current note in the history.
@ -22,6 +23,7 @@ import { Trans, useTranslation } from 'react-i18next'
*/ */
export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => { export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
useTranslation() useTranslation()
const [loading, setLoading] = useState(false)
const noteId = useApplicationState((state) => state.noteDetails?.id) const noteId = useApplicationState((state) => state.noteDetails?.id)
const history = useApplicationState((state) => state.history) const history = useApplicationState((state) => state.history)
const { showErrorNotification } = useUiNotifications() const { showErrorNotification } = useUiNotifications()
@ -38,8 +40,20 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
if (!noteId) { if (!noteId) {
return return
} }
toggleHistoryEntryPinning(noteId).catch(showErrorNotification('landing.history.error.updateEntry.text')) setLoading(true)
}, [noteId, showErrorNotification]) toggleHistoryEntryPinning(noteId)
.catch(showErrorNotification('landing.history.error.updateEntry.text'))
.finally(() => setLoading(false))
}, [noteId, setLoading, showErrorNotification])
if (loading) {
return (
<SidebarButton>
<WaitSpinner />
<Trans i18nKey={'common.loading'} />
</SidebarButton>
)
}
return ( return (
<SidebarButton <SidebarButton