@firecms/core 3.0.0-canary.168 → 3.0.0-canary.169

package/dist/internal/useUnsavedChangesDialog.d.ts

@@ -1,14 +1,12 @@
-import React from "react";
+/**
+ * Custom hook to handle navigation blocking when there are unsaved changes.
+ *
+ * @param when - Indicates whether to block navigation.
+ * @param onSuccess - Callback invoked when navigation is confirmed.
+ * @returns An object containing the state of navigation blocking and handlers.
+ */
 export declare function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void): {
     navigationWasBlocked: boolean;
     handleCancel: () => void;
     handleOk: () => void;
 };
-export interface UnsavedChangesDialogProps {
-    open: boolean;
-    body?: React.ReactNode;
-    title?: string;
-    handleOk: () => void;
-    handleCancel: () => void;
-}
-export declare function UnsavedChangesDialog({ open, handleOk, handleCancel, body, title }: UnsavedChangesDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/routes/CustomCMSRoute.d.ts

@@ -0,0 +1,4 @@
+import { CMSView } from "../types";
+export declare function CustomCMSRoute({ cmsView }: {
+    cmsView: CMSView;
+}): import("react").ReactNode;

package/dist/routes/FireCMSRoute.d.ts

@@ -0,0 +1 @@
+export declare function FireCMSRoute(): import("react/jsx-runtime").JSX.Element | null;

package/dist/routes/HomePageRoute.d.ts

@@ -0,0 +1,3 @@
+export declare function HomePageRoute({ children }: {
+    children: React.ReactNode;
+}): import("react").ReactNode;

package/dist/types/collections.d.ts

@@ -72,6 +72,10 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Set of properties that compose an entity
      */
     properties: PropertiesOrBuilders<M>;
+    /**
+     * Default preview properties displayed when this collection is referenced to.
+     */
+    previewProperties?: string[];
     /**
      * Title property of the entity. This is the property that will be used
      * as the title in entity related views and references.
@@ -79,11 +83,10 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     titleProperty?: keyof M;
     /**
-     * Can this collection be edited by the end user.
-     * Defaults to `true`.
-     * Keep in mind that you can also set this prop to individual properties.
+     * When editing an entity, you can choose to open the entity in a side dialog
+     * or in a full screen dialog. Defaults to `full_screen`.
      */
-    editable?: boolean;
+    openEntityMode?: "side_panel" | "full_screen";
     /**
      * Order in which the properties are displayed.
      * If you are specifying your collection as code, the order is the same as the
@@ -272,9 +275,12 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     sideDialogWidth?: number | string;
     /**
-     * Default preview properties displayed when this collection is referenced to.
+     * Can this collection configuration be edited by the end user.
+     * Defaults to `true`.
+     * Keep in mind that you can also set this prop to individual properties.
+     * This prop has only effect if you are using the collection editor.
      */
-    previewProperties?: string[];
+    editable?: boolean;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.
@@ -485,6 +491,12 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     clearFilter?: () => void;
     itemCount?: number;
     setItemCount?: (itemCount: number) => void;
+    initialScroll?: number;
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward";
+        scrollOffset: number;
+        scrollUpdateWasRequested: boolean;
+    }) => void;
     paginationEnabled?: boolean;
     pageSize?: number;
     checkFilterCombination?: (filterValues: FilterValues<any>, sortBy?: [string, "asc" | "desc"]) => boolean;

package/dist/types/datasource.d.ts

@@ -8,13 +8,13 @@ import { FireCMSContext } from "./firecms_context";
 export interface FetchEntityProps<M extends Record<string, any> = any> {
     path: string;
     entityId: string;
+    databaseId?: string;
     collection?: EntityCollection<M, any>;
 }
 /**
  * @group Datasource
  */
 export type ListenEntityProps<M extends Record<string, any> = any> = FetchEntityProps<M> & {
-    databaseId?: string;
     onUpdate: (entity: Entity<M>) => void;
     onError?: (error: Error) => void;
 };
@@ -99,7 +99,7 @@ export interface DataSource {
      * @param entityId
      * @param collection
      */
-    fetchEntity<M extends Record<string, any> = any>({ path, entityId, collection }: FetchEntityProps<M>): Promise<Entity<M> | undefined>;
+    fetchEntity<M extends Record<string, any> = any>({ path, entityId, databaseId, collection }: FetchEntityProps<M>): Promise<Entity<M> | undefined>;
     /**
      * Get realtime updates on one entity.
      * @param path

package/dist/types/dialogs_controller.d.ts

@@ -12,7 +12,7 @@ export interface DialogsController {
      * Open a dialog
      * @param props
      */
-    open: <T extends object = object>(props: DialogControllerEntryProps<T>) => {
+    open: (props: DialogControllerEntryProps) => {
         closeDialog: () => void;
     };
 }
@@ -20,7 +20,7 @@ export interface DialogsController {
  * Props used to open a side dialog
  * @group Hooks and utilities
  */
-export interface DialogControllerEntryProps<T extends object = object> {
+export interface DialogControllerEntryProps {
     key: string;
     /**
      * The component type that will be rendered
@@ -28,9 +28,5 @@ export interface DialogControllerEntryProps<T extends object = object> {
     Component: React.ComponentType<{
         open: boolean;
         closeDialog: () => void;
-    } & T>;
-    /**
-     * Props to pass to the dialog component
-     */
-    props?: T;
+    }>;
 }

package/dist/types/entities.d.ts

@@ -7,7 +7,7 @@ export type EntityStatus = "new" | "existing" | "copy";
  * Representation of an entity fetched from the datasource
  * @group Models
  */
-export interface Entity<M extends object> {
+export interface Entity<M extends object = any> {
     /**
      * ID of the entity
      */

package/dist/types/entity_actions.d.ts

@@ -4,7 +4,6 @@ import { Entity } from "./entities";
 import { EntityCollection, SelectionController } from "./collections";
 import { User } from "./user";
 import { SideEntityController } from "./side_entity_controller";
-import { FormContext } from "./fields";
 /**
  * An entity action is a custom action that can be performed on an entity.
  * They are displayed in the entity view and in the collection view.
@@ -56,9 +55,5 @@ export type EntityActionClickProps<M extends object, USER extends User = User> =
      * If this actions is being called from a side dialog
      */
     sideEntityController?: SideEntityController;
-    /**
-     * You can use the form context to manage the state of the form.
-     * This is only available if this action in being triggered from a form context.
-     */
-    formContext?: FormContext<M>;
+    openEntityMode: "side_panel" | "full_screen";
 };

package/dist/types/navigation.d.ts

@@ -57,11 +57,13 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     getCollectionFromPaths: (pathSegments: string[]) => EC | undefined;
     /**
-     * Default path under the navigation routes of the CMS will be created
+     * Default path under the navigation routes of the CMS will be created.
+     * Defaults to '/'. You may want to change this `basepath` to 'admin' for example.
      */
     basePath: string;
     /**
-     * Default path under the collection routes of the CMS will be created
+     * Default path under the collection routes of the CMS will be created.
+     * It defaults to '/c'
      */
     baseCollectionPath: string;
     /**
@@ -72,14 +74,6 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * @param cmsPath
      */
     urlPathToDataPath: (cmsPath: string) => string;
-    /**
-     * Convert a collection or entity path to a URL path
-     * @param path
-     */
-    buildCMSUrlPath: (path: string) => string;
-    buildUrlEditCollectionPath: (props: {
-        path: string;
-    }) => string;
     /**
      * Base url path for the home screen
      */
@@ -97,10 +91,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     buildUrlCollectionPath: (path: string) => string;
     /**
-     * Turn a path with aliases into a resolved path
+     * Turn a path with collection ids into a resolved path.
+     * The ids (typically used in urls) will be replaced with relative paths (typically used in database paths)
      * @param pathWithAliases
      */
-    resolveAliasesFrom: (pathWithAliases: string) => string;
+    resolveIdsFrom: (pathWithAliases: string) => string;
     /**
      * Call this method to recalculate the navigation
      */
@@ -120,6 +115,27 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * @param ids
      */
     convertIdsToPaths: (ids: string[]) => string[];
+    /**
+     * A function to navigate to a specified route or URL.
+     *
+     * @param {string} to - The target route or URL to navigate to.
+     * @param {NavigateOptions} [options] - Optional configuration settings for navigation, such as replace behavior or state data.
+     */
+    navigate: (to: string, options?: NavigateOptions) => void;
+};
+export interface NavigateOptions {
+    replace?: boolean;
+    state?: any;
+    preventScrollReset?: boolean;
+    relative?: "route" | "path";
+    flushSync?: boolean;
+    viewTransition?: boolean;
+}
+export type NavigationBlocker = {
+    updateBlockListener: (path: string, block: boolean, basePath?: string) => () => void;
+    isBlocked: (path: string) => boolean;
+    proceed?: () => void;
+    reset?: () => void;
 };
 /**
  * Custom additional views created by the developer, added to the main

package/dist/types/plugins.d.ts

@@ -162,6 +162,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;
+    layout: "side_panel" | "full_screen";
 }
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {
     fieldConfigId: string;

package/dist/types/side_entity_controller.d.ts

@@ -22,7 +22,7 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Open the entity with a selected sub-collection view. If the panel for this
      * entity was already open, it is replaced.
      */
-    selectedSubPath?: string;
+    selectedTab?: string;
     /**
      * Use this prop to override the width of the form view.
      * e.g. "600px"

package/dist/util/entity_cache.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Saves data to the in-memory cache and persists it individually in `localStorage`.
+ * @param path - The unique path/key for the data.
+ * @param data - The data to cache and persist.
+ */
+export declare function saveEntityToCache(path: string, data: object): void;
+/**
+ * Retrieves an entity from the in-memory cache or `localStorage`.
+ * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
+ * @param path - The unique path/key for the entity.
+ * @returns The cached entity or `undefined` if not found.
+ */
+export declare function getEntityFromCache(path: string): object | undefined;
+export declare function hasEntityInCache(path: string): boolean;
+/**
+ * Removes an entity from both the in-memory cache and `localStorage`.
+ * @param path - The unique path/key for the entity to remove.
+ */
+export declare function removeEntityFromCache(path: string): void;
+/**
+ * Clears the entire in-memory cache and removes all related entities from `localStorage`.
+ */
+export declare function clearEntityCache(): void;

package/dist/util/navigation_from_path.d.ts

@@ -4,19 +4,23 @@ export interface NavigationViewEntityInternal<M extends Record<string, any>> {
     type: "entity";
     entityId: string;
     path: string;
+    fullPath: string;
     parentCollection: EntityCollection<M>;
 }
 export interface NavigationViewCollectionInternal<M extends Record<string, any>> {
     type: "collection";
+    id: string;
     path: string;
+    fullPath: string;
     collection: EntityCollection<M>;
 }
 export interface NavigationViewEntityCustomInternal<M extends Record<string, any>> {
     type: "custom_view";
     path: string;
+    fullPath: string;
     view: EntityCustomView<M>;
 }
-export declare function getNavigationEntriesFromPathInternal(props: {
+export declare function getNavigationEntriesFromPath(props: {
     path: string;
     collections: EntityCollection[] | undefined;
     currentFullPath?: string;

package/dist/util/navigation_utils.d.ts

@@ -1,4 +1,4 @@
-import { EntityCollection } from "../types";
+import { EntityCollection, NavigationController, SideEntityController } from "../types";
 export declare function removeInitialAndTrailingSlashes(s: string): string;
 export declare function removeInitialSlash(s: string): string;
 export declare function removeTrailingSlash(s: string): string;
@@ -18,3 +18,14 @@ export declare function getCollectionByPathOrId(pathOrId: string, collections: E
  * @param subpaths
  */
 export declare function getCollectionPathsCombinations(subpaths: string[]): string[];
+export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, selectedTab, sideEntityController, onClose, navigation }: {
+    openEntityMode: "side_panel" | "full_screen";
+    collection?: EntityCollection;
+    entityId?: string;
+    selectedTab?: string;
+    copy?: boolean;
+    path: string;
+    sideEntityController: SideEntityController;
+    onClose?: () => void;
+    navigation: NavigationController;
+}): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.168",
+  "version": "3.0.0-canary.169",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.168",
-    "@firecms/formex": "^3.0.0-canary.168",
-    "@firecms/ui": "^3.0.0-canary.168",
+    "@firecms/editor": "^3.0.0-canary.169",
+    "@firecms/formex": "^3.0.0-canary.169",
+    "@firecms/ui": "^3.0.0-canary.169",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -106,7 +106,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "81a6eef43477c31b82713fc044e4836838ed74bb",
+  "gitHead": "8c086883fc1cb08a74d4bd66ef2f952affa9fdb9",
   "publishConfig": {
     "access": "public"
   },

package/src/components/CircularProgressCenter.tsx

@@ -13,7 +13,7 @@ export function CircularProgressCenter({ text, ...props }: CircularProgressProps
 }) {
     return (
         <div
-            className="flex w-full h-screen max-h-full max-w-full bg-surface-50 dark:bg-surface-900 gap-4">
+            className="flex w-full h-screen max-h-full max-w-full gap-4">
             <div className="m-auto flex flex-col gap-2 items-center">
                 <CircularProgress {...props}/>
                 {text && <Typography

package/src/components/DeleteEntityDialog.tsx

@@ -181,7 +181,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             </DialogContent>
             <DialogActions>
 
-                {loading && <CircularProgress size={"small"}/>}
+                {loading && <CircularProgress size={"smallest"}/>}
 
                 <Button onClick={handleCancel}
                         disabled={loading}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,8 +1,20 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
+import {
+    Checkbox,
+    Chip,
+    cls,
+    EditIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Skeleton,
+    Tooltip
+} from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
+import { hasEntityInCache } from "../../util/entity_cache";
 
 /**
  *
@@ -32,23 +44,25 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   actions = [],
                                                                                   hideId,
                                                                                   selectionController,
+                                                                                  openEntityMode
                                                                               }:
-                                                                                  {
-                                                                                      entity: Entity<any>,
-                                                                                      collection?: EntityCollection<any>,
-                                                                                      fullPath?: string,
-                                                                                      width: number,
-                                                                                      frozen?: boolean,
-                                                                                      size: CollectionSize,
-                                                                                      isSelected?: boolean,
-                                                                                      selectionEnabled?: boolean,
-                                                                                      actions?: EntityAction[],
-                                                                                      hideId?: boolean,
-                                                                                      onCollectionChange?: () => void,
-                                                                                      selectionController?: SelectionController;
-                                                                                      highlightEntity?: (entity: Entity<any>) => void;
-                                                                                      unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                  }) {
+                                                                              {
+                                                                                  entity: Entity<any>,
+                                                                                  collection?: EntityCollection<any>,
+                                                                                  fullPath?: string,
+                                                                                  width: number,
+                                                                                  frozen?: boolean,
+                                                                                  size: CollectionSize,
+                                                                                  isSelected?: boolean,
+                                                                                  selectionEnabled?: boolean,
+                                                                                  actions?: EntityAction[],
+                                                                                  hideId?: boolean,
+                                                                                  onCollectionChange?: () => void,
+                                                                                  selectionController?: SelectionController;
+                                                                                  highlightEntity?: (entity: Entity<any>) => void;
+                                                                                  unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                  openEntityMode: "side_panel" | "full_screen";
+                                                                              }) {
 
     const largeLayout = useLargeLayout();
 
@@ -63,6 +77,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
     return (
         <div
             className={cls(
@@ -98,6 +113,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         highlightEntity,
                                         unhighlightEntity,
                                         onCollectionChange,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -126,6 +142,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             highlightEntity,
                                             unhighlightEntity,
                                             onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -148,11 +165,15 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
             {!hideId && size !== "xs" && (
                 <div
-                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center flex items-center justify-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-
+                    {hasDraft && <Tooltip title={"Unsaved changes"} className={"inline"}>
+                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
+                            <EditIcon size={12}/>
+                        </Chip>
+                    </Tooltip>}
                     {entity
                         ? entity.id
                         : <Skeleton/>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -34,14 +34,14 @@ import { getRowHeight } from "../common/table_height";
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
  * @see VirtualTable
  * @group Components
  */
-export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, USER extends User>
+export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any> = any, USER extends User = any>
 ({
      className,
      style,
@@ -57,6 +57,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      highlightedEntities,
      onEntityClick,
      onColumnResize,
+     initialScroll,
+     onScroll,
      onSizeChanged,
      textSearchEnabled = false,
      hoverRow = true,
@@ -76,7 +78,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      getIdColumnWidth,
      onTextSearchClick,
      textSearchLoading,
-     enablePopupIcon
+     enablePopupIcon,
+     openEntityMode = "side_panel"
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
@@ -265,7 +268,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                                                        width={column.width}
                                                        frozen={column.frozen}
                                                        isSelected={false}
-                                                       size={size}/>;
+                                                       size={size}
+                                                       openEntityMode={openEntityMode}/>;
             } else if (additionalFieldsMap[columnKey]) {
                 return additionalCellRenderer(props);
             } else if (props.columnIndex < columns.length + 1) {
@@ -313,6 +317,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                              highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
                              tableController={tableController}
                              onValueChange={onValueChange}
+                             initialScroll={initialScroll}
+                             onScroll={onScroll}
                              onColumnResize={onColumnResize}
                              hoverRow={hoverRow}
                              filterable={filterable}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -72,6 +72,21 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     onColumnResize?(params: OnColumnResizeParams): void;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Callback when the selected size of the table is changed
      */
@@ -90,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -136,6 +151,8 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     textSearchLoading?: boolean;
 
     enablePopupIcon: boolean;
+
+    openEntityMode?: "side_panel" | "full_screen";
 };
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/components/EntityCollectionTable/index.tsx

@@ -8,5 +8,5 @@ export type {
 
 export * from "./PropertyTableCell";
 export * from "./EntityCollectionRowActions";
-export * from "../common/useDataSourceEntityCollectionTableController";
+export * from "../common/useDataSourceTableController";
 export * from "./column_utils";

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -56,7 +56,7 @@ export function CollectionTableToolbar({
             <Select
                 value={size as string}
                 className="w-16 h-10"
-                size={"medium"}
+                size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
             >
@@ -87,9 +87,9 @@ export function CollectionTableToolbar({
 
             <div className="flex items-center gap-2">
 
-                {largeLayout && <div className="w-[22px]">
+                {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&
-                        <CircularProgress size={"small"}/>}
+                        <CircularProgress size={"smallest"}/>}
                 </div>}
 
                 {(onTextSearch || onTextSearchClick) &&