#741 - content processing message

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
 

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.",
 

src/dashboardWebView/DashboardCommand.ts

@@ -1,4 +1,5 @@
 export enum DashboardCommand {
+  initializing = 'initializing',
   loading = 'loading',
   pages = 'pages',
   searchPages = 'searchPages',

src/dashboardWebView/components/App.tsx

@@ -123,7 +123,7 @@ Stack: ${componentStack}`
           <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
           <Route
             path={routePaths.contents}
-            element={<Contents pages={pages} loading={loading} />}
+            element={<Contents pages={pages} />}
           />
           <Route path={routePaths.media} element={<Media />} />
           <Route path={routePaths.snippets} element={<Snippets />} />

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<ISpinnerProps> = (
-  _: React.PropsWithChildren<ISpinnerProps>
+  { type }: React.PropsWithChildren<ISpinnerProps>
 ) => {
   return (
     <div className={`z-50 fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-[var(--vscode-editor-background)] opacity-75`}>
@@ -12,6 +17,15 @@ export const Spinner: React.FunctionComponent<ISpinnerProps> = (
       >
         <div className={`h-full absolute rounded-sm bg-[var(--vscode-activityBarBadge-background)] animate-[vscode-loader_4s_ease-in-out_infinite]`} />
       </div>
+
+      {
+        type === 'initPages' && (
+          <div className='spinner-msg h-full text-2xl flex justify-center items-center text-[var(--vscode-foreground)]'>
+            <span>{l10n.t(LocalizationKey.loadingInitPages)}</span>
+            <span className='dots'></span>
+          </div>
+        )
+      }
     </div>
   );
 };

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<IContentsProps> = ({
-  pages,
-  loading
+  pages
 }: React.PropsWithChildren<IContentsProps>) => {
+  const loading = useRecoilValue(LoadingAtom);
   const settings = useRecoilValue(SettingsSelector);
   const { pageItems } = usePages(pages);
 
@@ -35,7 +34,7 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
   return (
     <PageLayout folders={pageFolders} totalPages={pageItems.length}>
       <div className="w-full flex-grow max-w-full mx-auto pb-6">
-        {loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
+        {loading ? <Spinner type={loading} /> : <Overview pages={pageItems} settings={settings} />}
       </div>
 
       <SponsorMsg

src/dashboardWebView/components/Contents/Overview.tsx

@@ -6,8 +6,6 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../../constants/GroupOption';
-import { Page } from '../../models/Page';
-import { Settings } from '../../models/Settings';
 import { GroupingSelector, PageAtom, ViewSelector } from '../../state';
 import { Item } from './Item';
 import { List } from './List';
@@ -20,7 +18,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItem } from './PinnedItem';
-import { DashboardViewType } from '../../models';
+import { DashboardViewType, Page, Settings } from '../../models';
 
 export interface IOverviewProps {
   pages: Page[];

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -37,7 +37,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
 
   const refreshPages = () => {
-    setLoading(true);
+    setLoading("initPages");
     resetSearch();
     resetSorting();
     resetFolder();
@@ -47,7 +47,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   };
 
   const refreshMedia = () => {
-    setLoading(true);
+    setLoading("initPages");
     resetPage();
     resetSearch();
     Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -37,7 +37,7 @@ export const MediaHeaderTop: React.FunctionComponent<
 
   const mediaUpdate = (message: MessageEvent<EventData<{ key: string; value: any }>>) => {
     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,

src/dashboardWebView/hooks/useMedia.tsx

@@ -75,7 +75,7 @@ export default function useMedia() {
   const messageListener = useCallback((message: MessageEvent<EventData<MediaPaths | { key: string; value: any }>>) => {
     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);

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);

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';

src/dashboardWebView/state/atom/LoadingAtom.ts

@@ -1,6 +1,7 @@
 import { atom } from 'recoil';
+import { LoadingType } from '../../../models';
 
-export const LoadingAtom = atom<boolean>({
+export const LoadingAtom = atom<LoadingType>({
   key: 'LoadingAtom',
-  default: false
+  default: undefined
 });

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);

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);
 

src/localization/localization.enum.ts

@@ -143,6 +143,10 @@ export enum LocalizationKey {
    * Back
    */
   commonBack = 'common.back',
+  /**
+   * Loading content
+   */
+  loadingInitPages = 'loading.initPages',
   /**
    * output window
    */

src/models/LoadingType.ts

@@ -0,0 +1 @@
+export type LoadingType = 'initPages' | 'loading' | undefined;

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';