From 33ca291ef7d101df8396103ea93d42c0ca31c0cb Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Tue, 29 Dec 2020 15:49:25 +0100
Subject: [PATCH] Styles and keys refactor for enhanced performance. Version
 0.21.1

---
 CHANGELOG.md                                  |  7 +-
 package.json                                  |  2 +-
 src/collection/CollectionTable.tsx            | 72 +++++++++---------
 src/collection/fields/TableSelect.tsx         |  5 +-
 .../filters/StringNumberFilterField.tsx       |  6 +-
 src/collection/popup_field/PopupFormField.tsx |  3 +-
 src/form/EntityForm.tsx                       |  5 +-
 src/form/fields/ReferenceField.tsx            |  4 +-
 src/form/fields/Select.tsx                    |  2 +-
 src/form/fields/StorageUploadField.tsx        | 22 +++---
 src/preview/AsyncPreviewComponent.tsx         |  2 +-
 src/preview/EntityPreview.tsx                 |  2 +-
 src/preview/PreviewComponent.tsx              | 12 +--
 src/preview/StorageThumbnail.tsx              |  2 +-
 src/preview/components/ArrayEnumPreview.tsx   | 17 +----
 src/preview/components/ArrayOfMapsPreview.tsx | 11 +--
 .../components/ArrayOfReferencesPreview.tsx   | 11 +--
 .../ArrayOfStorageComponentsPreview.tsx       | 14 ++--
 .../components/ArrayOfStringsPreview.tsx      | 14 ++--
 src/preview/components/ArrayPreview.tsx       | 22 ++----
 src/preview/components/CustomChip.tsx         |  1 -
 src/preview/components/EnumChipsPreview.tsx   |  4 +-
 src/preview/{ => components}/ImagePreview.tsx | 31 ++++----
 src/preview/components/MapPreview.tsx         | 10 +--
 src/preview/components/NumberPreview.tsx      |  2 +-
 src/preview/components/ReferencePreview.tsx   | 40 +++++-----
 .../{ => components}/SkeletonComponent.tsx    | 73 +++++++++----------
 src/preview/components/StringPreview.tsx      |  2 +-
 .../components/UrlComponentPreview.tsx        | 32 ++++----
 src/preview/components/styles.tsx             | 36 +++++++++
 src/preview/index.tsx                         |  2 +-
 src/routes/AdditionalViewRoute.tsx            |  2 +-
 32 files changed, 240 insertions(+), 230 deletions(-)
 rename src/preview/{ => components}/ImagePreview.tsx (74%)
 rename src/preview/{ => components}/SkeletonComponent.tsx (86%)
 create mode 100644 src/preview/components/styles.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 751efab..f83dd71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Change Log
 
-## [0.21.0] - 2020-12-15
+## [0.21.1] - 2020-12-30
+### Changed
+- Table performance improvements
+
+## [0.21.0] - 2020-12-29
 ### Added
 - Inline editing of tables. Tables are now editable by default. There are two new
 parameters you can set in entity collection views.
@@ -8,7 +12,6 @@ parameters you can set in entity collection views.
   edit or create new entities.
   - `inlineEditing` defaults to true. If false, the users can still edit the
   content, but the inline editing is disabled. The side panel is still enabled.
-
 ### Changed
 - [BREAKING] The custom fields API has been refactored and simplified. The Formik
 props have been abstracted away and only the relevant fields are exposed.
diff --git a/package.json b/package.json
index 648cc79..2c84541 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@camberi/firecms",
-    "version": "0.21.0",
+    "version": "0.21.1",
     "description": "Awesome Firestore based CMS",
     "author": "camberi",
     "license": "GPL-3.0",
diff --git a/src/collection/CollectionTable.tsx b/src/collection/CollectionTable.tsx
index 467c903..7dc88c4 100644
--- a/src/collection/CollectionTable.tsx
+++ b/src/collection/CollectionTable.tsx
@@ -32,7 +32,7 @@ import { getIconForProperty } from "../util/property_icons";
 import { CollectionTableToolbar } from "./CollectionTableToolbar";
 import DeleteIcon from "@material-ui/icons/Delete";
 import KeyboardTabIcon from "@material-ui/icons/KeyboardTab";
-import SkeletonComponent, { renderSkeletonText } from "../preview/SkeletonComponent";
+import SkeletonComponent, { renderSkeletonText } from "../preview/components/SkeletonComponent";
 import ErrorBoundary from "../components/ErrorBoundary";
 import { getPreviewSizeFrom } from "../preview/PreviewComponentProps";
 import DeleteEntityDialog from "./DeleteEntityDialog";
@@ -388,20 +388,24 @@ export function CollectionTable<S extends EntitySchema<Key, P>,
 
         if (column.type === "property") {
             if (!editEnabled || !inlineEditing) {
-                return <PreviewTableCell
-                    size={size}
-                    align={column.align}>
-                    <PreviewComponent
-                        name={propertyKey}
-                        value={entity.values[propertyKey]}
-                        property={property}
-                        size={getPreviewSizeFrom(size)}
-                        entitySchema={schema}
-                    />
-                </PreviewTableCell>;
+                return (
+                    <PreviewTableCell
+                        key={`preview_cell_${propertyKey}_${rowIndex}_${columnIndex}`}
+                        size={size}
+                        align={column.align}>
+                        <PreviewComponent
+                            name={`preview_${propertyKey}_${rowIndex}_${columnIndex}`}
+                            value={entity.values[propertyKey]}
+                            property={property}
+                            size={getPreviewSizeFrom(size)}
+                            entitySchema={schema}
+                        />
+                    </PreviewTableCell>
+                );
             } else if (property.disabled || !editEnabled) {
                 return (
                     <DisabledTableCell
+                        key={`disabled_cell_${propertyKey}_${rowIndex}_${columnIndex}`}
                         size={size}
                         align={column.align}>
                         <PreviewComponent
@@ -438,25 +442,27 @@ export function CollectionTable<S extends EntitySchema<Key, P>,
                 const isFocused = selected && focused;
 
                 return entity ?
-                    <TableCell tableKey={tableKey}
-                               size={size}
-                               align={column.align}
-                               name={propertyKey}
-                               path={collectionPath}
-                               entity={entity}
-                               schema={schema}
-                               selected={selected}
-                               focused={isFocused}
-                               setPreventOutsideClick={setPreventOutsideClick}
-                               setFocused={setFocused}
-                               value={entity.values[propertyKey]}
-                               columnIndex={columnIndex}
-                               rowIndex={rowIndex}
-                               CollectionTable={CollectionTable}
-                               property={property}
-                               openPopup={openPopup}
-                               select={onSelect}
-                               createFormField={createFormField}/>
+                    <TableCell
+                        key={`table_cell_${propertyKey}_${rowIndex}_${columnIndex}`}
+                        tableKey={tableKey}
+                        size={size}
+                        align={column.align}
+                        name={propertyKey}
+                        path={collectionPath}
+                        entity={entity}
+                        schema={schema}
+                        selected={selected}
+                        focused={isFocused}
+                        setPreventOutsideClick={setPreventOutsideClick}
+                        setFocused={setFocused}
+                        value={entity.values[propertyKey]}
+                        columnIndex={columnIndex}
+                        rowIndex={rowIndex}
+                        CollectionTable={CollectionTable}
+                        property={property}
+                        openPopup={openPopup}
+                        select={onSelect}
+                        createFormField={createFormField}/>
                     :
                     <SkeletonComponent property={property}
                                        size={getPreviewSizeFrom(size)}/>;
@@ -608,7 +614,7 @@ export function CollectionTable<S extends EntitySchema<Key, P>,
                                 key: orderByProperty,
                                 order: currentOrder
                             } : undefined}
-                            overscanRowCount={6}
+                            overscanRowCount={2}
                             onColumnSort={onColumnSort}
                             onEndReachedThreshold={PIXEL_NEXT_PAGE_OFFSET}
                             onEndReached={loadNextPage}
@@ -632,7 +638,7 @@ export function CollectionTable<S extends EntitySchema<Key, P>,
 
                             {columns.map((column) =>
                                 <Column
-                                    key={column.id}
+                                    key={`column_${tableKey}_${column.id}`}
                                     type={column.type}
                                     title={column.label}
                                     className={classes.column}
diff --git a/src/collection/fields/TableSelect.tsx b/src/collection/fields/TableSelect.tsx
index 923f33e..c41c248 100644
--- a/src/collection/fields/TableSelect.tsx
+++ b/src/collection/fields/TableSelect.tsx
@@ -48,6 +48,7 @@ export function TableSelect(props: {
         <Select
             // TODO: related to prev. replace autofocus with ref, it makes the scroll jump when rendered
             autoFocus
+            key={`table_select_${name}`}
             // inputRef={ref}
             className={classes.select}
             classes={{ root: classes.selectRoot }}
@@ -88,7 +89,7 @@ export function TableSelect(props: {
                     small={true}/>;
                 if (multiple) {
                     return (
-                        <MenuItem key={`select-${key}`}
+                        <MenuItem key={`select-${name}-${key}`}
                                   value={key}
                                   dense={true}>
                             <Checkbox
@@ -98,7 +99,7 @@ export function TableSelect(props: {
                     );
                 } else {
                     return (
-                        <MenuItem key={`select-${key}`} value={key}
+                        <MenuItem key={`select-${name}-${key}`} value={key}
                                   dense={true}>
                             {chip}
                         </MenuItem>
diff --git a/src/collection/filters/StringNumberFilterField.tsx b/src/collection/filters/StringNumberFilterField.tsx
index 2a2b9c9..c1a0a4d 100644
--- a/src/collection/filters/StringNumberFilterField.tsx
+++ b/src/collection/filters/StringNumberFilterField.tsx
@@ -105,7 +105,7 @@ export default function StringNumberFilterField({ name, property }: StringNumber
                                            }}>
                                     {possibleOperations.map((op) =>
                                         <MenuItem
-                                            key={`filter_op_${op}`}
+                                            key={`filter_op_${name}_${op}`}
                                             value={op}>{operationLabels[op]}</MenuItem>
                                     )}
 
@@ -116,7 +116,7 @@ export default function StringNumberFilterField({ name, property }: StringNumber
 
                                 {!enumValues && <Input
                                     fullWidth
-                                    key={`filter-${name}`}
+                                    key={`filter_${name}`}
                                     type={dataType === "number" ? "number" : undefined}
                                     value={internalValue ? internalValue : ""}
                                     onChange={(evt) => {
@@ -147,7 +147,7 @@ export default function StringNumberFilterField({ name, property }: StringNumber
                                             </div>
                                         ) : undefined}>
                                     {Object.entries(enumValues).map(([key, value]) => (
-                                        <MenuItem key={`select-${key}`}
+                                        <MenuItem key={`select_${name}_${key}`}
                                                   value={key}>
                                             <CustomChip
                                                 colorKey={key as string}
diff --git a/src/collection/popup_field/PopupFormField.tsx b/src/collection/popup_field/PopupFormField.tsx
index 8ac97d3..9c35b3a 100644
--- a/src/collection/popup_field/PopupFormField.tsx
+++ b/src/collection/popup_field/PopupFormField.tsx
@@ -149,7 +149,7 @@ function PopupFormField<S extends EntitySchema>({
 
     const form = entity && (
         <div
-            key={`${tableKey}_${entity.id}_${rowIndex}`}
+            key={`popup_form_${tableKey}_${entity.id}_${rowIndex}`}
             style={{
                 width: 470,
                 maxWidth: "100vw",
@@ -194,6 +194,7 @@ function PopupFormField<S extends EntitySchema>({
     return (
         <Portal container={document.body}>
             <Draggable
+                key={`draggable_${name}_${rowIndex}`}
                 x={popupLocation?.x}
                 y={popupLocation?.y}
                 open={formPopupOpen}
diff --git a/src/form/EntityForm.tsx b/src/form/EntityForm.tsx
index 4bc8a5b..24e355c 100644
--- a/src/form/EntityForm.tsx
+++ b/src/form/EntityForm.tsx
@@ -19,7 +19,8 @@ import { ErrorFocus } from "./ErrorFocus";
 export const useStyles = makeStyles(theme => createStyles({
     stickyButtons: {
         marginTop: theme.spacing(2),
-        backgroundColor: "#ffffffb8",
+        background: "rgba(255,255,255,0.6)",
+        backdropFilter: "blur(3px)",
         borderTop: "solid 1px #f9f9f9",
         position: "sticky",
         bottom: 0,
@@ -213,7 +214,7 @@ function EntityForm<S extends EntitySchema>({
                     Object.entries(underlyingChanges).forEach(([key, value]) => {
                         const formValue = values[key];
                         if (!deepEqual(value, formValue) && !touched[key]) {
-                            console.debug("Updated value from Firestore:", key, value)
+                            console.debug("Updated value from Firestore:", key, value);
                             setFieldValue(key, !!value ? value : null);
                             setFieldTouched(key, false);
                         }
diff --git a/src/form/fields/ReferenceField.tsx b/src/form/fields/ReferenceField.tsx
index 8ddc9b1..2f088e6 100644
--- a/src/form/fields/ReferenceField.tsx
+++ b/src/form/fields/ReferenceField.tsx
@@ -165,7 +165,7 @@ export default function ReferenceField<S extends EntitySchema>({
                     {listProperties && listProperties.map((key, index) => {
                         const propertyKey = schema.properties[key as string];
                         return (
-                            <Box key={"ref_prev_" + key + index}
+                            <Box
                                  mt={0.5}
                                  mb={0.5}>
                                 <ErrorBoundary>{
@@ -221,7 +221,7 @@ export default function ReferenceField<S extends EntitySchema>({
                         </Box>
 
                         {entity &&
-                        <Box key={"ref_prev_id"}
+                        <Box
                              alignSelf={"center"}
                              m={1}>
                             <Tooltip title={value && value.path}>
diff --git a/src/form/fields/Select.tsx b/src/form/fields/Select.tsx
index 6b878bc..f5f5025 100644
--- a/src/form/fields/Select.tsx
+++ b/src/form/fields/Select.tsx
@@ -65,7 +65,7 @@ export default function Select<T extends EnumType>({
                 }>
 
                 {Object.entries(enumValues).map(([key, value]) => (
-                    <MenuItem key={`select-${key}`} value={key}>
+                    <MenuItem key={`select_${name}_${key}`} value={key}>
                         <CustomChip
                             colorKey={typeof key === "number" ? `${name}_${key}` : key as string}
                             label={value as string}
diff --git a/src/form/fields/StorageUploadField.tsx b/src/form/fields/StorageUploadField.tsx
index 4e72e84..0b83d04 100644
--- a/src/form/fields/StorageUploadField.tsx
+++ b/src/form/fields/StorageUploadField.tsx
@@ -398,16 +398,18 @@ export function StorageUpload({
                         );
                     }
 
-                    return <StorageEntry
-                        key={`storage_entry_${index}`}
-                        entry={entry}
-                        index={index}
-                        dragType={"storage_card_" + name}
-                        moveItem={moveItem}
-                        onHover={setHoveredIndex}
-                        hovered={hoveredIndex === index}>
-                        {child}
-                    </StorageEntry>;
+                    return (
+                        <StorageEntry
+                            key={`storage_entry_${name}_${index}`}
+                            entry={entry}
+                            index={index}
+                            dragType={"storage_card_" + name}
+                            moveItem={moveItem}
+                            onHover={setHoveredIndex}
+                            hovered={hoveredIndex === index}>
+                            {child}
+                        </StorageEntry>
+                    );
                 })
                 }
 
diff --git a/src/preview/AsyncPreviewComponent.tsx b/src/preview/AsyncPreviewComponent.tsx
index d979e21..2cd209b 100644
--- a/src/preview/AsyncPreviewComponent.tsx
+++ b/src/preview/AsyncPreviewComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { EntitySchema } from "../models";
-import { renderSkeletonText } from "./SkeletonComponent";
+import { renderSkeletonText } from "./components/SkeletonComponent";
 
 
 export interface AsyncPreviewComponentProps<S extends EntitySchema> {
diff --git a/src/preview/EntityPreview.tsx b/src/preview/EntityPreview.tsx
index ad5639c..609b403 100644
--- a/src/preview/EntityPreview.tsx
+++ b/src/preview/EntityPreview.tsx
@@ -58,7 +58,7 @@ export default function EntityPreview<S extends EntitySchema>(
         <TableContainer>
             <Table aria-label="entity table">
                 <TableBody>
-                    <TableRow key={"entity_prev_id"}>
+                    <TableRow >
                         <TableCell align="right"
                                    component="td"
                                    scope="row"
diff --git a/src/preview/PreviewComponent.tsx b/src/preview/PreviewComponent.tsx
index cea3539..e8ae70b 100644
--- a/src/preview/PreviewComponent.tsx
+++ b/src/preview/PreviewComponent.tsx
@@ -32,6 +32,8 @@ import ErrorIcon from "@material-ui/icons/Error";
 
 import firebase from "firebase/app";
 import { Box } from "@material-ui/core";
+import { useStyles } from "./components/styles";
+import clsx from "clsx";
 
 export function PreviewComponent<T>(props: PreviewComponentProps<T>) {
     let content: JSX.Element | any;
@@ -171,14 +173,14 @@ export function PreviewComponent<T>(props: PreviewComponentProps<T>) {
 }
 
 function buildWrongValueType() {
+
+    const classes = useStyles();
     return (
-        <Box
-            display={"flex"}
-            alignItems={"center"}
-            m={1}>
+        <div
+            className={clsx(classes.flexCenter, classes.smallMargin)}>
             <ErrorIcon fontSize={"small"} color={"error"}/>
             <Box marginLeft={1}>Unexpected value</Box>
-        </Box>
+        </div>
     );
 }
 
diff --git a/src/preview/StorageThumbnail.tsx b/src/preview/StorageThumbnail.tsx
index f1feb5b..c0662a4 100644
--- a/src/preview/StorageThumbnail.tsx
+++ b/src/preview/StorageThumbnail.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { getDownloadURL } from "../firebase";
-import { renderSkeletonImageThumbnail } from "./SkeletonComponent";
+import { renderSkeletonImageThumbnail } from "./components/SkeletonComponent";
 import {
     PreviewComponentFactoryProps,
     PreviewComponentProps
diff --git a/src/preview/components/ArrayEnumPreview.tsx b/src/preview/components/ArrayEnumPreview.tsx
index aa557bb..91e6fa1 100644
--- a/src/preview/components/ArrayEnumPreview.tsx
+++ b/src/preview/components/ArrayEnumPreview.tsx
@@ -5,22 +5,11 @@ import {
 
 import React from "react";
 
-import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
 import ErrorBoundary from "../../components/ErrorBoundary";
 import { EnumValues, NumberProperty, StringProperty } from "../../models";
 import { CustomChip } from "./CustomChip";
+import { useStyles } from "./styles";
 
-export const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        root: {
-            display: "flex",
-            flexWrap: "wrap"
-        },
-        item: {
-            m: 0.2,
-        }
-    })
-);
 
 export function buildArrayEnumPreview(value: string[] | number[],
                                name: string,
@@ -30,10 +19,10 @@ export function buildArrayEnumPreview(value: string[] | number[],
     const classes = useStyles();
 
     return (
-        <div className={classes.root}>
+        <div className={classes.arrayRoot}>
             {value &&
             (value as any[]).map((v, index) => (
-                    <div className={classes.item} key={`preview_array_ref_${name}_${index}`}>
+                    <div className={classes.arrayItem} key={`preview_array_ref_${name}_${index}`}>
                         <ErrorBoundary>
                             <CustomChip
                                 colorKey={typeof v == "number" ? `${name}_${v}` : v as string}
diff --git a/src/preview/components/ArrayOfMapsPreview.tsx b/src/preview/components/ArrayOfMapsPreview.tsx
index c5731d0..65325e5 100644
--- a/src/preview/components/ArrayOfMapsPreview.tsx
+++ b/src/preview/components/ArrayOfMapsPreview.tsx
@@ -16,16 +16,7 @@ import {
     TableRow,
     Theme
 } from "@material-ui/core";
-
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        tableNoBottomBorder: {
-            "&:last-child th, &:last-child td": {
-                borderBottom: 0
-            }
-        }
-    })
-);
+import { useStyles } from "./styles";
 
 export function ArrayOfMapsPreview({
                                        name,
diff --git a/src/preview/components/ArrayOfReferencesPreview.tsx b/src/preview/components/ArrayOfReferencesPreview.tsx
index afadf05..4defcd2 100644
--- a/src/preview/components/ArrayOfReferencesPreview.tsx
+++ b/src/preview/components/ArrayOfReferencesPreview.tsx
@@ -9,14 +9,7 @@ import React from "react";
 
 import { createStyles, makeStyles, Theme } from "@material-ui/core";
 import { default as ReferencePreview } from "./ReferencePreview";
-
-export const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        root: {
-            margin: 0.2,
-        }
-    })
-);
+import { useStyles } from "./styles";
 
 export function ArrayOfReferencesPreview({
                                              name,
@@ -37,7 +30,7 @@ export function ArrayOfReferencesPreview({
         <>
             {value &&
             value.map((v, index) =>
-                <div className={classes.root} key={`preview_array_ref_${name}_${index}`}>
+                <div className={classes.arrayItem} key={`preview_array_ref_${name}_${index}`}>
                     <ReferencePreview
                         name={`${name}[${index}]`}
                         entitySchema={entitySchema}
diff --git a/src/preview/components/ArrayOfStorageComponentsPreview.tsx b/src/preview/components/ArrayOfStorageComponentsPreview.tsx
index 6181464..8c00c3d 100644
--- a/src/preview/components/ArrayOfStorageComponentsPreview.tsx
+++ b/src/preview/components/ArrayOfStorageComponentsPreview.tsx
@@ -9,6 +9,7 @@ import React from "react";
 import { Box } from "@material-ui/core";
 import ErrorBoundary from "../../components/ErrorBoundary";
 import { PreviewComponent } from "../PreviewComponent";
+import { useStyles } from "./styles";
 
 
 export function ArrayOfStorageComponentsPreview({
@@ -24,14 +25,13 @@ export function ArrayOfStorageComponentsPreview({
         throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
 
     const childSize: PreviewSize = size === "regular" ? "small" : "tiny";
+    const classes = useStyles();
 
-    return <Box
-        display={"flex"}
-        flexWrap="wrap">
+    return <div className={classes.arrayRoot}>
         {value &&
         value.map((v, index) =>
-            <Box m={0.2}
-                 key={"preview_array_storage_" + name + v + index}>
+            <div className={classes.arrayItem}
+                 key={`preview_array_storage_${name}_${index}`}>
                 <ErrorBoundary>
                     <PreviewComponent
                         name={name}
@@ -40,7 +40,7 @@ export function ArrayOfStorageComponentsPreview({
                         size={childSize}
                         entitySchema={entitySchema}/>
                 </ErrorBoundary>
-            </Box>
+            </div>
         )}
-    </Box>;
+    </div>;
 }
diff --git a/src/preview/components/ArrayOfStringsPreview.tsx b/src/preview/components/ArrayOfStringsPreview.tsx
index 72d763a..c1aff41 100644
--- a/src/preview/components/ArrayOfStringsPreview.tsx
+++ b/src/preview/components/ArrayOfStringsPreview.tsx
@@ -6,10 +6,9 @@ import {
 
 import React from "react";
 
-import { Box } from "@material-ui/core";
 import ErrorBoundary from "../../components/ErrorBoundary";
 import { StringPreview } from "./StringPreview";
-
+import { useStyles } from "./styles";
 
 export function ArrayOfStringsPreview({
                                           name,
@@ -19,6 +18,8 @@ export function ArrayOfStringsPreview({
                                           entitySchema
                                       }: PreviewComponentProps<string[]> & PreviewComponentFactoryProps) {
 
+    const classes = useStyles();
+
     if (property.dataType !== "array" || property.of.dataType !== "string")
         throw Error("Picked wrong preview component ArrayOfStringsPreview");
 
@@ -28,11 +29,10 @@ export function ArrayOfStringsPreview({
     const stringProperty = property.of as StringProperty;
 
     return (
-        <Box display={stringProperty.config?.previewAsTag ? "flex" : "block"}
-             flexWrap={"wrap"}>
+        <div className={classes.arrayRoot}>
             {value &&
             value.map((v, index) =>
-                <Box m={stringProperty.config?.previewAsTag ? 0.2 : 0.5}
+                <div className={classes.arrayItem}
                      key={`preview_array_strings_${name}_${index}`}>
                     <ErrorBoundary>
                         <StringPreview name={name}
@@ -41,8 +41,8 @@ export function ArrayOfStringsPreview({
                                        size={size}
                                        entitySchema={entitySchema}/>
                     </ErrorBoundary>
-                </Box>
+                </div>
             )}
-        </Box>
+        </div>
     );
 }
diff --git a/src/preview/components/ArrayPreview.tsx b/src/preview/components/ArrayPreview.tsx
index f83d3b5..8af7b59 100644
--- a/src/preview/components/ArrayPreview.tsx
+++ b/src/preview/components/ArrayPreview.tsx
@@ -16,17 +16,7 @@ import {
     Theme
 } from "@material-ui/core";
 import { PreviewComponent } from "../PreviewComponent";
-
-
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        tableNoBottomBorder: {
-            "&:last-child th, &:last-child td": {
-                borderBottom: 0
-            }
-        }
-    })
-);
+import { useStyles } from "./styles";
 
 export function ArrayPreview({
                                        name,
@@ -37,6 +27,8 @@ export function ArrayPreview({
                                        PreviewComponent
                                    }: PreviewComponentProps<any[]> & PreviewComponentFactoryProps) {
 
+    const classes = useStyles();
+
     if (property.dataType !== "array")
         throw Error("Picked wrong preview component ArrayPreview");
 
@@ -47,11 +39,11 @@ export function ArrayPreview({
     const childSize: PreviewSize = size === "regular" ? "small" : "tiny";
 
     return (
-        <Grid>
+        <>
             {values &&
             values.map((value, index) =>
                 <React.Fragment key={"preview_array_" + value + "_" + index}>
-                    <Box p={1}>
+                    <div className={classes.arrayItemBig} >
                         <ErrorBoundary>
                             <PreviewComponent
                                 name={name}
@@ -60,10 +52,10 @@ export function ArrayPreview({
                                 size={childSize}
                                 entitySchema={entitySchema}/>
                         </ErrorBoundary>
-                    </Box>
+                    </div>
                     {index < values.length - 1 && <Divider/>}
                 </React.Fragment>
             )}
-        </Grid>
+        </>
     );
 }
diff --git a/src/preview/components/CustomChip.tsx b/src/preview/components/CustomChip.tsx
index 6b2a979..a8ca01f 100644
--- a/src/preview/components/CustomChip.tsx
+++ b/src/preview/components/CustomChip.tsx
@@ -35,7 +35,6 @@ export function CustomChip({ colorKey, label, error, outlined, small }: EnumChip
                 label: classes.label
             }}
             size={small ? "small" : "medium"}
-            key={"preview_chip_" + colorKey}
             variant={outlined ? "outlined" : "default"}
             label={label}
         />
diff --git a/src/preview/components/EnumChipsPreview.tsx b/src/preview/components/EnumChipsPreview.tsx
index 3dfa74a..01a61ba 100644
--- a/src/preview/components/EnumChipsPreview.tsx
+++ b/src/preview/components/EnumChipsPreview.tsx
@@ -13,7 +13,7 @@ export function EnumChipsPreview({
                               }: PreviewComponentProps<string>):React.ReactElement {
 
     if (property.config?.enumValues) {
-        return <React.Fragment>{property.config?.enumValues[value]}</React.Fragment>;
+        return <>{property.config?.enumValues[value]}</>;
     } else if (property.config?.previewAsTag) {
         return (
             <ErrorBoundary>
@@ -24,6 +24,6 @@ export function EnumChipsPreview({
                 />
             </ErrorBoundary>);
     } else {
-        return <React.Fragment>{value}</React.Fragment>;
+        return <>{value}</>;
     }
 }
diff --git a/src/preview/ImagePreview.tsx b/src/preview/components/ImagePreview.tsx
similarity index 74%
rename from src/preview/ImagePreview.tsx
rename to src/preview/components/ImagePreview.tsx
index 5194297..3639b62 100644
--- a/src/preview/ImagePreview.tsx
+++ b/src/preview/components/ImagePreview.tsx
@@ -1,15 +1,20 @@
-import React, { CSSProperties, useState } from "react";
-import { Box, IconButton } from "@material-ui/core";
+import React, { CSSProperties, useMemo, useState } from "react";
+import clsx from "clsx";
+import { IconButton } from "@material-ui/core";
 import OpenInNewIcon from "@material-ui/icons/OpenInNew";
-import { getThumbnailMeasure, PreviewSize } from "./PreviewComponentProps";
+import { getThumbnailMeasure, PreviewSize } from "../PreviewComponentProps";
+import { useStyles } from "./styles";
 
 type ImagePreviewProps = { size: PreviewSize, url: string };
 
 function ImagePreview({ size, url }: ImagePreviewProps) {
 
+
+    const classes = useStyles();
+
     const [onHover, setOnHover] = useState(false);
 
-    const imageSize = getThumbnailMeasure(size);
+    const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
     if (size === "tiny") {
         return (
@@ -34,22 +39,16 @@ function ImagePreview({ size, url }: ImagePreviewProps) {
         };
 
     return (
-        <Box
+        <div
+            className={clsx(classes.flexCenter, classes.imageWrap)}
             key={"image_preview_" + url}
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
             style={{
-                position: "relative",
-                maxWidth: "100%",
-                maxHeight: "100%"
+                width: imageSize,
+                height: imageSize
             }}
-
             onMouseEnter={() => setOnHover(true)}
             onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}
-            width={imageSize}
-            height={imageSize}>
+            onMouseLeave={() => setOnHover(false)}>
 
             <img src={url}
                  style={imageStyle}/>
@@ -71,7 +70,7 @@ function ImagePreview({ size, url }: ImagePreviewProps) {
                     </IconButton>
                 </a>
             )}
-        </Box>
+        </div>
 
     );
 }
diff --git a/src/preview/components/MapPreview.tsx b/src/preview/components/MapPreview.tsx
index a2a50c3..dca7e6b 100644
--- a/src/preview/components/MapPreview.tsx
+++ b/src/preview/components/MapPreview.tsx
@@ -59,7 +59,7 @@ export function MapPreview<T>({
 
     if (size !== "regular")
         return (
-            <React.Fragment>
+            <>
                 {mapProperties.map((key, index) => (
                     <ListItem
                         key={"map_preview_" + mapProperty.title + key + index}>
@@ -72,7 +72,7 @@ export function MapPreview<T>({
                         </ErrorBoundary>
                     </ListItem>
                 ))}
-            </React.Fragment>
+            </>
         );
 
     return (
@@ -82,16 +82,16 @@ export function MapPreview<T>({
                 mapProperties.map((key, index) => {
                     return (
                         <TableRow
-                            key={`map_preview_table_${mapProperty.title}_${index}`}
+                            key={`map_preview_table_${name}_${index}`}
                             className={classes.tableNoBottomBorder}>
-                            <TableCell key={`table-cell-title-${key}`}
+                            <TableCell key={`table-cell-title-${name}-${key}`}
                                        component="th">
                                 <Typography variant={"caption"}
                                             color={"textSecondary"}>
                                     {mapProperty.properties[key].title}
                                 </Typography>
                             </TableCell>
-                            <TableCell key={`table-cell-${key}`} component="th">
+                            <TableCell key={`table-cell-${name}-${key}`} component="th">
                                 <ErrorBoundary>
                                     <PreviewComponent
                                         name={key}
diff --git a/src/preview/components/NumberPreview.tsx b/src/preview/components/NumberPreview.tsx
index 0779dee..067c72a 100644
--- a/src/preview/components/NumberPreview.tsx
+++ b/src/preview/components/NumberPreview.tsx
@@ -19,6 +19,6 @@ export function NumberPreview({
                            outlined={false}
                            small={size !== "regular"}/>;
     } else {
-        return <React.Fragment>{value}</React.Fragment>;
+        return <>{value}</>;
     }
 }
diff --git a/src/preview/components/ReferencePreview.tsx b/src/preview/components/ReferencePreview.tsx
index 701a674..37a9e1e 100644
--- a/src/preview/components/ReferencePreview.tsx
+++ b/src/preview/components/ReferencePreview.tsx
@@ -3,7 +3,6 @@ import { useEffect } from "react";
 import clsx from "clsx";
 
 import {
-    Box,
     createStyles,
     IconButton,
     makeStyles,
@@ -20,7 +19,7 @@ import {
     PreviewComponentProps,
     PreviewSize
 } from "../PreviewComponentProps";
-import SkeletonComponent from "../SkeletonComponent";
+import SkeletonComponent from "./SkeletonComponent";
 import KeyboardTabIcon from "@material-ui/icons/KeyboardTab";
 import { useSelectedEntityContext } from "../../side_dialog/SelectedEntityContext";
 import ErrorIcon from "@material-ui/icons/Error";
@@ -31,8 +30,9 @@ import { useAppConfigContext } from "../../contexts/AppConfigContext";
 import firebase from "firebase/app";
 import "firebase/firestore";
 import { PreviewComponent } from "../PreviewComponent";
+import { useStyles } from "./styles";
 
-const useStyles = makeStyles<Theme, { size: PreviewSize }>((theme: Theme) =>
+const useReferenceStyles = makeStyles<Theme, { size: PreviewSize }>((theme: Theme) =>
     createStyles({
         paper: {
             display: "flex",
@@ -95,7 +95,8 @@ export default React.memo<PreviewComponentProps<firebase.firestore.DocumentRefer
             entitySchema
         }: PreviewComponentProps<firebase.firestore.DocumentReference> & PreviewComponentFactoryProps) {
 
-        const classes = useStyles({ size });
+        const referenceClasses = useReferenceStyles({ size });
+        const classes = useStyles();
 
         // TODO: remove when https://github.com/firebase/firebase-js-sdk/issues/4125 is fixed and replace with instance check of DocumentReference
         const isFirestoreReference = value
@@ -135,13 +136,13 @@ export default React.memo<PreviewComponentProps<firebase.firestore.DocumentRefer
         let body: JSX.Element;
 
         function buildError(error: string) {
-            return <Box
-                display={"flex"}
-                alignItems={"center"}
-                m={1}>
+            return <div
+                className={clsx(classes.flexCenter, classes.smallMargin)}>
                 <ErrorIcon fontSize={"small"} color={"error"}/>
-                <Box marginLeft={1}>{error}</Box>
-            </Box>;
+                <div style={{
+                    marginLeft: 1
+                }}>{error}</div>
+            </div>;
         }
 
         if (!value) {
@@ -160,11 +161,10 @@ export default React.memo<PreviewComponentProps<firebase.firestore.DocumentRefer
 
             body = (
                 <>
-                    <div className={classes.root}>
+                    <div className={referenceClasses.root}>
 
                         {size !== "tiny" && entity &&
-                        <div key={"ref_prev_id"}
-                             className={classes.inner}>
+                        <div className={referenceClasses.inner}>
                             <Typography variant={"caption"} className={"mono"}>
                                 {entity.id}
                             </Typography>
@@ -175,7 +175,7 @@ export default React.memo<PreviewComponentProps<firebase.firestore.DocumentRefer
 
                             return (
                                 <div key={"ref_prev" + property.title + key}
-                                     className={classes.inner}>
+                                     className={referenceClasses.inner}>
                                     {entity && PreviewComponent ?
                                         <PreviewComponent name={key as string}
                                                           value={entity.values[key as string]}
@@ -191,7 +191,7 @@ export default React.memo<PreviewComponentProps<firebase.firestore.DocumentRefer
                         })}
 
                     </div>
-                    <div className={classes.marginAuto}>
+                    <div className={referenceClasses.marginAuto}>
                         {entity &&
                         <Tooltip title={`See details for ${entity.id}`}>
                             <IconButton
@@ -212,12 +212,12 @@ export default React.memo<PreviewComponentProps<firebase.firestore.DocumentRefer
         }
 
         return (
-            <Paper elevation={0} className={clsx(classes.paper,
+            <Paper elevation={0} className={clsx(referenceClasses.paper,
                 {
-                    [classes.regular]: size === "regular",
-                    [classes.small]: size === "small",
-                    [classes.tiny]: size === "tiny",
-                    [classes.clickable]: !!onClick
+                    [referenceClasses.regular]: size === "regular",
+                    [referenceClasses.small]: size === "small",
+                    [referenceClasses.tiny]: size === "tiny",
+                    [referenceClasses.clickable]: !!onClick
                 })}
                    onClick={onClick}>
 
diff --git a/src/preview/SkeletonComponent.tsx b/src/preview/components/SkeletonComponent.tsx
similarity index 86%
rename from src/preview/SkeletonComponent.tsx
rename to src/preview/components/SkeletonComponent.tsx
index d7259dd..b254665 100644
--- a/src/preview/SkeletonComponent.tsx
+++ b/src/preview/components/SkeletonComponent.tsx
@@ -5,41 +5,27 @@ import {
     Properties,
     Property,
     StringProperty
-} from "../models";
+} from "../../models";
 import React from "react";
 import {
-    Box,
-    createStyles,
     Divider,
     Grid,
     List,
     ListItem,
-    makeStyles,
     Table,
     TableBody,
     TableCell,
-    TableRow,
-    Theme
+    TableRow
 } from "@material-ui/core";
 import { Skeleton } from "@material-ui/lab";
-import { getThumbnailMeasure, PreviewSize } from "./PreviewComponentProps";
-
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        tableNoBottomBorder: {
-            "&:last-child th, &:last-child td": {
-                borderBottom: 0
-            }
-        }
-    })
-);
+import { getThumbnailMeasure, PreviewSize } from "../PreviewComponentProps";
+import { useStyles } from "./styles";
 
 export interface SkeletonComponentProps<T> {
     property: Property,
     size: PreviewSize
 }
 
-
 export default function SkeletonComponent<T>({
                                                  property,
                                                  size
@@ -188,9 +174,9 @@ function renderArrayOfStrings() {
         <Grid>
             {
                 [0, 1].map((value, index) => (
-                    <React.Fragment key={"skeleton_array_strings_" + value}>
+                    <>
                         {renderSkeletonText(index)}
-                    </React.Fragment>
+                    </>
                 ))}
         </Grid>
     );
@@ -201,9 +187,9 @@ function renderArrayEnumTableCell<T extends EnumType>() {
         <Grid>
             {
                 [0, 1].map((value, index) =>
-                    <React.Fragment key={"skeleton_array_enum_" + value}>
+                    <>
                         {renderSkeletonText(index)}
-                    </React.Fragment>
+                    </>
                 )}
         </Grid>
     );
@@ -217,10 +203,10 @@ function renderGenericArrayCell(
 
             {
                 [0, 1].map((value, index) =>
-                    <React.Fragment key={"skeleton_array_" + value}>
+                    <>
                         <SkeletonComponent property={property}
                                            size={"small"}/>
-                    </React.Fragment>
+                    </>
                 )}
         </Grid>
     );
@@ -230,17 +216,21 @@ function renderShapedArray<T extends EnumType>(
     properties: Property[]
 ) {
 
+    const classes = useStyles();
+
     return (
         <Grid>
             {properties &&
             properties.map((property, index) =>
                 <React.Fragment
                     key={"preview_array_" + properties[index] + "_" + index}>
-                    {properties[index] && <Box m={1}>
-                        <SkeletonComponent
-                            property={property}
-                            size={"small"}/>
-                    </Box>}
+                    {properties[index] && (
+                        <div className={classes.smallMargin}>
+                            <SkeletonComponent
+                                property={property}
+                                size={"small"}/>
+                        </div>
+                    )}
                     {properties[index] && index < properties.length - 1 &&
                     <Divider/>}
                 </React.Fragment>
@@ -300,26 +290,29 @@ function renderUrlComponent(property: StringProperty, size: PreviewSize = "regul
 }
 
 function renderUrlFile(size: PreviewSize) {
+
+    const classes = useStyles();
+
     return (
-        <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            width={getThumbnailMeasure(size)}
-            height={getThumbnailMeasure(size)}>
+        <div
+            className={(classes as any)}
+            style={{
+                width: getThumbnailMeasure(size),
+                height: getThumbnailMeasure(size)
+            }}>
             {renderSkeletonIcon()}
-        </Box>
+        </div>
     );
 }
 
 export function renderSkeletonText(index?: number) {
-    return <Skeleton key={"skeleton_text_" + index} variant="text"/>;
+    return <Skeleton variant="text"/>;
 }
 
 export function renderSkeletonCaptionText(index?: number) {
-    return <Skeleton key={"skeleton_text_" + index}
-                     height={20}
-                     variant="text"/>;
+    return <Skeleton
+        height={20}
+        variant="text"/>;
 }
 
 export function renderSkeletonIcon() {
diff --git a/src/preview/components/StringPreview.tsx b/src/preview/components/StringPreview.tsx
index 3cfd875..a2f7323 100644
--- a/src/preview/components/StringPreview.tsx
+++ b/src/preview/components/StringPreview.tsx
@@ -29,6 +29,6 @@ export function StringPreview({
                 />
             </ErrorBoundary>);
     } else {
-        return <React.Fragment>{value}</React.Fragment>;
+        return <>{value}</>;
     }
 }
diff --git a/src/preview/components/UrlComponentPreview.tsx b/src/preview/components/UrlComponentPreview.tsx
index 334b44d..cd46e4e 100644
--- a/src/preview/components/UrlComponentPreview.tsx
+++ b/src/preview/components/UrlComponentPreview.tsx
@@ -4,20 +4,23 @@ import {
 } from "../PreviewComponentProps";
 import React from "react";
 import { MediaType } from "../../models";
-import ImagePreview from "../ImagePreview";
+import ImagePreview from "./ImagePreview";
 
 
-import { Box, CardMedia, Link } from "@material-ui/core";
+import { CardMedia, Link } from "@material-ui/core";
 import DescriptionOutlinedIcon from "@material-ui/icons/DescriptionOutlined";
 import OpenInNewIcon from "@material-ui/icons/OpenInNew";
+import { useStyles } from "./styles";
 
 export function UrlComponentPreview({
-                                  name,
-                                  value,
-                                  property,
-                                  size,
-                                  entitySchema
-                              }: PreviewComponentProps<string>):React.ReactElement {
+                                        name,
+                                        value,
+                                        property,
+                                        size,
+                                        entitySchema
+                                    }: PreviewComponentProps<string>): React.ReactElement {
+
+    const classes = useStyles();
 
     if (!value) return <div/>;
     const url = value;
@@ -60,14 +63,13 @@ export function UrlComponentPreview({
             rel="noopener noreferrer"
             target="_blank"
             onClick={(e) => e.stopPropagation()}>
-            <Box
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                width={getThumbnailMeasure(size)}
-                height={getThumbnailMeasure(size)}>
+            <div className={classes.flexCenter}
+                 style={{
+                     width: getThumbnailMeasure(size),
+                     height: getThumbnailMeasure(size)
+                 }}>
                 <DescriptionOutlinedIcon/>
-            </Box>
+            </div>
         </a>;
     }
 }
diff --git a/src/preview/components/styles.tsx b/src/preview/components/styles.tsx
new file mode 100644
index 0000000..dcbb072
--- /dev/null
+++ b/src/preview/components/styles.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { createStyles, makeStyles, Theme } from "@material-ui/core";
+
+export const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        flexCenter: {
+            display:"flex",
+            alignItems:"center",
+            justifyContent:"center"
+        },
+        smallMargin: {
+            margin: theme.spacing(1)
+        },
+        arrayRoot: {
+            display: "flex",
+            flexWrap: "wrap"
+        },
+        arrayItem: {
+            m: 0.2,
+        },
+        arrayItemBig: {
+            m: theme.spacing(1),
+        },
+        tableNoBottomBorder: {
+            "&:last-child th, &:last-child td": {
+                borderBottom: 0
+            }
+        },
+        imageWrap:{
+            position: "relative",
+            maxWidth: "100%",
+            maxHeight: "100%"
+        }
+    })
+);
diff --git a/src/preview/index.tsx b/src/preview/index.tsx
index 2562dfb..a495b67 100644
--- a/src/preview/index.tsx
+++ b/src/preview/index.tsx
@@ -6,7 +6,7 @@ import StorageThumbnail from "./StorageThumbnail";
 import AsyncPreviewComponent from "./AsyncPreviewComponent";
 import EntityPreview from "./EntityPreview";
 import PreviewComponent from "./PreviewComponent";
-import SkeletonComponent from "./SkeletonComponent";
+import SkeletonComponent from "./components/SkeletonComponent";
 
 export {
     PreviewComponent,
diff --git a/src/routes/AdditionalViewRoute.tsx b/src/routes/AdditionalViewRoute.tsx
index 9259e62..6d04612 100644
--- a/src/routes/AdditionalViewRoute.tsx
+++ b/src/routes/AdditionalViewRoute.tsx
@@ -26,7 +26,7 @@ function AdditionalViewRoute({
         breadcrumbsContext.set({
             breadcrumbs: [breadcrumb]
         });
-    }, [url]);
+    }, []);
 
     return <React.Fragment>
         {additionalView.view}