From fbbfaa572e62f04ff9604a1907b90d1329ecc0d4 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Wed, 24 Jan 2024 15:44:33 +0100 Subject: [PATCH] #741 - content processing message --- CHANGELOG.md | 1 + l10n/bundle.l10n.json | 2 ++ src/dashboardWebView/DashboardCommand.ts | 1 + src/dashboardWebView/components/App.tsx | 2 +- .../components/Common/Spinner.tsx | 18 ++++++++++++++++-- .../components/Contents/Contents.tsx | 9 ++++----- .../components/Contents/Overview.tsx | 4 +--- .../components/Header/RefreshDashboardData.tsx | 4 ++-- .../components/Media/MediaHeaderTop.tsx | 6 +++--- src/dashboardWebView/hooks/useMedia.tsx | 2 +- src/dashboardWebView/hooks/useMessages.tsx | 4 ++-- src/dashboardWebView/hooks/usePages.tsx | 1 - src/dashboardWebView/state/atom/LoadingAtom.ts | 5 +++-- src/listeners/dashboard/PagesListener.ts | 5 ++++- src/listeners/dashboard/SettingsListener.ts | 4 ++-- src/localization/localization.enum.ts | 4 ++++ src/models/LoadingType.ts | 1 + src/models/index.ts | 1 + 18 files changed, 49 insertions(+), 25 deletions(-) create mode 100644 src/models/LoadingType.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c8c0d24..c8ae0e92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - [#727](https://github.com/estruyf/vscode-front-matter/pull/727): Updated Japanese translations thanks to [mayumihara](https://github.com/mayumih387) - [#737](https://github.com/estruyf/vscode-front-matter/issues/737): Optimize the grid layout of the content and media dashboards +- [#741](https://github.com/estruyf/vscode-front-matter/issues/741): Added message on the content dashboard when content is processed ### ⚡️ Optimizations diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json index 8a0bbae0..7daf8e15 100644 --- a/l10n/bundle.l10n.json +++ b/l10n/bundle.l10n.json @@ -36,6 +36,8 @@ "common.openSettings": "Open settings", "common.back": "Back", + "loading.initPages": "Loading content", + "notifications.outputChannel.link": "output window", "notifications.outputChannel.description": "Check the {0} for more details.", diff --git a/src/dashboardWebView/DashboardCommand.ts b/src/dashboardWebView/DashboardCommand.ts index 465d2ebd..52e75c5d 100644 --- a/src/dashboardWebView/DashboardCommand.ts +++ b/src/dashboardWebView/DashboardCommand.ts @@ -1,4 +1,5 @@ export enum DashboardCommand { + initializing = 'initializing', loading = 'loading', pages = 'pages', searchPages = 'searchPages', diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx index 213c9e61..9548681a 100644 --- a/src/dashboardWebView/components/App.tsx +++ b/src/dashboardWebView/components/App.tsx @@ -123,7 +123,7 @@ Stack: ${componentStack}` } /> } + element={} /> } /> } /> diff --git a/src/dashboardWebView/components/Common/Spinner.tsx b/src/dashboardWebView/components/Common/Spinner.tsx index 0b87e2a0..6659732b 100644 --- a/src/dashboardWebView/components/Common/Spinner.tsx +++ b/src/dashboardWebView/components/Common/Spinner.tsx @@ -1,9 +1,14 @@ import * as React from 'react'; +import { LoadingType } from '../../../models'; +import * as l10n from '@vscode/l10n'; +import { LocalizationKey } from '../../../localization'; -export interface ISpinnerProps { } +export interface ISpinnerProps { + type?: LoadingType; +} export const Spinner: React.FunctionComponent = ( - _: React.PropsWithChildren + { type }: React.PropsWithChildren ) => { return (
@@ -12,6 +17,15 @@ export const Spinner: React.FunctionComponent = ( >
+ + { + type === 'initPages' && ( +
+ {l10n.t(LocalizationKey.loadingInitPages)} + +
+ ) + }
); }; \ No newline at end of file diff --git a/src/dashboardWebView/components/Contents/Contents.tsx b/src/dashboardWebView/components/Contents/Contents.tsx index 3ac3ada3..0db5a4df 100644 --- a/src/dashboardWebView/components/Contents/Contents.tsx +++ b/src/dashboardWebView/components/Contents/Contents.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useRecoilValue } from 'recoil'; import { Page } from '../../models'; -import { SettingsSelector } from '../../state'; +import { LoadingAtom, SettingsSelector } from '../../state'; import { Overview } from './Overview'; import { Spinner } from '../Common/Spinner'; import { SponsorMsg } from '../Layout/SponsorMsg'; @@ -14,13 +14,12 @@ import { PageLayout } from '../Layout/PageLayout'; export interface IContentsProps { pages: Page[]; - loading: boolean; } export const Contents: React.FunctionComponent = ({ - pages, - loading + pages }: React.PropsWithChildren) => { + const loading = useRecoilValue(LoadingAtom); const settings = useRecoilValue(SettingsSelector); const { pageItems } = usePages(pages); @@ -35,7 +34,7 @@ export const Contents: React.FunctionComponent = ({ return (
- {loading ? : } + {loading ? : }
{ - setLoading(true); + setLoading("initPages"); resetSearch(); resetSorting(); resetFolder(); @@ -47,7 +47,7 @@ export const RefreshDashboardData: React.FunctionComponent { - setLoading(true); + setLoading("initPages"); resetPage(); resetSearch(); Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder }); diff --git a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx index 944438c9..47a99767 100644 --- a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx +++ b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx @@ -37,7 +37,7 @@ export const MediaHeaderTop: React.FunctionComponent< const mediaUpdate = (message: MessageEvent>) => { if (message.data.command === DashboardCommand.mediaUpdate) { - setLoading(true); + setLoading("loading"); Messenger.send(DashboardMessage.getMedia, { page, folder: selectedFolder || '', @@ -51,7 +51,7 @@ export const MediaHeaderTop: React.FunctionComponent< prevSelectedFolder !== null || settings?.dashboardState?.media.selectedFolder !== selectedFolder ) { - setLoading(true); + setLoading("loading"); setPage(0); setLastUpdated(new Date().getTime().toString()); } @@ -63,7 +63,7 @@ export const MediaHeaderTop: React.FunctionComponent< React.useEffect(() => { if (debounceGetMedia) { - setLoading(true); + setLoading("loading"); Messenger.send(DashboardMessage.getMedia, { page, diff --git a/src/dashboardWebView/hooks/useMedia.tsx b/src/dashboardWebView/hooks/useMedia.tsx index fc711ad2..0ea22ae8 100644 --- a/src/dashboardWebView/hooks/useMedia.tsx +++ b/src/dashboardWebView/hooks/useMedia.tsx @@ -75,7 +75,7 @@ export default function useMedia() { const messageListener = useCallback((message: MessageEvent>) => { if (message.data.command === DashboardCommand.media) { const payload: MediaPaths = message.data.payload as MediaPaths; - setLoading(false); + setLoading("loading"); setMedia(payload.media); setTotal(payload.total); setFolders(payload.folders); diff --git a/src/dashboardWebView/hooks/useMessages.tsx b/src/dashboardWebView/hooks/useMessages.tsx index b85072ab..f9f41d7a 100644 --- a/src/dashboardWebView/hooks/useMessages.tsx +++ b/src/dashboardWebView/hooks/useMessages.tsx @@ -53,7 +53,7 @@ export default function useMessages() { break; case DashboardCommand.pages: setPages(message.payload); - setLoading(false); + setLoading(undefined); break; case DashboardCommand.searchReady: setSearchReady(true); @@ -73,7 +73,7 @@ export default function useMessages() { useEffect(() => { Messenger.listen(messageListener); - setLoading(true); + setLoading("loading"); Messenger.send(DashboardMessage.getViewType); Messenger.send(DashboardMessage.getTheme); Messenger.send(DashboardMessage.getData); diff --git a/src/dashboardWebView/hooks/usePages.tsx b/src/dashboardWebView/hooks/usePages.tsx index e3629e15..cb8a468e 100644 --- a/src/dashboardWebView/hooks/usePages.tsx +++ b/src/dashboardWebView/hooks/usePages.tsx @@ -1,5 +1,4 @@ import { useState, useEffect, useCallback } from 'react'; -import { SortOption } from '../constants/SortOption'; import { Tab } from '../constants/Tab'; import { Page } from '../models/Page'; import { useRecoilState, useRecoilValue } from 'recoil'; diff --git a/src/dashboardWebView/state/atom/LoadingAtom.ts b/src/dashboardWebView/state/atom/LoadingAtom.ts index 73a84324..ac3e3535 100644 --- a/src/dashboardWebView/state/atom/LoadingAtom.ts +++ b/src/dashboardWebView/state/atom/LoadingAtom.ts @@ -1,6 +1,7 @@ import { atom } from 'recoil'; +import { LoadingType } from '../../../models'; -export const LoadingAtom = atom({ +export const LoadingAtom = atom({ key: 'LoadingAtom', - default: false + default: undefined }); diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts index f4b111b7..8133f093 100644 --- a/src/listeners/dashboard/PagesListener.ts +++ b/src/listeners/dashboard/PagesListener.ts @@ -18,6 +18,7 @@ import { DataListener } from '../panel'; import Fuse from 'fuse.js'; import { PagesParser } from '../../services/PagesParser'; import { unlinkAsync, rmdirAsync } from '../../utils'; +import { LoadingType } from '../../models'; export class PagesListener extends BaseListener { private static watchers: { [path: string]: FileSystemWatcher } = {}; @@ -211,6 +212,8 @@ export class PagesListener extends BaseListener { if (cb) { cb(cachedPages); } + } else { + this.sendMsg(DashboardCommand.loading, 'initPages' as LoadingType); } } else { PagesParser.reset(); @@ -223,7 +226,7 @@ export class PagesListener extends BaseListener { this.sendMsg(DashboardCommand.searchReady, true); await this.createSearchIndex(pages); - this.sendMsg(DashboardCommand.loading, false); + this.sendMsg(DashboardCommand.loading, undefined as LoadingType); if (cb) { cb(pages); diff --git a/src/listeners/dashboard/SettingsListener.ts b/src/listeners/dashboard/SettingsListener.ts index bcbad6bc..74492212 100644 --- a/src/listeners/dashboard/SettingsListener.ts +++ b/src/listeners/dashboard/SettingsListener.ts @@ -12,7 +12,7 @@ import { DashboardCommand } from '../../dashboardWebView/DashboardCommand'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { DashboardSettings, Extension, Notifications, Settings } from '../../helpers'; import { FrameworkDetector } from '../../helpers/FrameworkDetector'; -import { Framework, Template, PostMessageData, StaticFolder } from '../../models'; +import { Framework, Template, PostMessageData, StaticFolder, LoadingType } from '../../models'; import { BaseListener } from './BaseListener'; import { Cache } from '../../commands/Cache'; import { Preview } from '../../commands'; @@ -98,7 +98,7 @@ export class SettingsListener extends BaseListener { public static async switchProject(project: string) { if (project) { - this.sendMsg(DashboardCommand.loading, true); + this.sendMsg(DashboardCommand.loading, 'loading' as LoadingType); Settings.setProject(project); await Cache.clear(false); diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts index 54e508de..e5440e98 100644 --- a/src/localization/localization.enum.ts +++ b/src/localization/localization.enum.ts @@ -143,6 +143,10 @@ export enum LocalizationKey { * Back */ commonBack = 'common.back', + /** + * Loading content + */ + loadingInitPages = 'loading.initPages', /** * output window */ diff --git a/src/models/LoadingType.ts b/src/models/LoadingType.ts new file mode 100644 index 00000000..1ad170f1 --- /dev/null +++ b/src/models/LoadingType.ts @@ -0,0 +1 @@ +export type LoadingType = 'initPages' | 'loading' | undefined; diff --git a/src/models/index.ts b/src/models/index.ts index 68886aa7..1f4ef199 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -13,6 +13,7 @@ export * from './DataType'; export * from './DraftField'; export * from './Framework'; export * from './GitSettings'; +export * from './LoadingType'; export * from './MediaPaths'; export * from './Mode'; export * from './PanelSettings';