diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 09627d83..013fff62 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - uses: actions/setup-node@v3
       with:
         node-version: "${{ env.NODE }}"
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 2fb9f934..74518112 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -26,7 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/git-command.yml b/.github/workflows/git-command.yml
index 9c17ff7c..b9185c83 100644
--- a/.github/workflows/git-command.yml
+++ b/.github/workflows/git-command.yml
@@ -19,7 +19,7 @@ jobs:
         run: echo "$PAYLOAD_CONTEXT"
 
       - name: Checkout on chat command
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GIT_PAT }}
           repository: ${{ github.event.client_payload.pull_request.head.repo.full_name }}
diff --git a/src/components/CandidateTaskView/CandidateTaskView.js b/src/components/CandidateTaskView/CandidateTaskView.js
deleted file mode 100644
index 0338a76a..00000000
--- a/src/components/CandidateTaskView/CandidateTaskView.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import { observer } from "mobx-react";
-import React, { forwardRef, useCallback, useRef } from "react";
-import { Block, Elem } from "../../utils/bem";
-import { Spinner } from "../Common/Spinner";
-import "./CandidateTaskView.styl";
-import { getRoot } from "mobx-state-tree";
-import { useEffect, useState } from "react";
-import { format } from "date-fns";
-import { FF_LSDV_4711, isFF } from "../../utils/feature-flags";
-
-const imgDefaultProps = {};
-
-if (isFF(FF_LSDV_4711)) imgDefaultProps.crossOrigin = 'anonymous';
-
-const DataItemVisual = forwardRef(({ columns, dataKey, data }, imageRef) => {
-  const [isInProgress, setIsInProgress] = useState();
-  const [fileContent, setFileContent] = useState();
-  const [isFileError, setIsFileError] = useState(false);
-  const isUrlData = /https?:\/\/.*/.test(data);
-  const columnDefinition = columns.find(colData => colData.alias === dataKey);
-
-  useEffect(async () => {
-    if ( isUrlData && columnDefinition?.currentType === "Text" ) {
-      setIsInProgress(true);
-      setIsFileError(false);
-      let response;
-
-      try {
-        response = await fetch(data);
-      } catch (ex) {
-        response = ex;
-      }
-
-      if (response?.status === 200) {
-        setFileContent(await response.text());
-      } else {
-        console.error("Error:", response);
-        setIsFileError(true);
-      }
-      setIsInProgress(false);
-    }
-  }, [isUrlData, data, columnDefinition]);
-
-  if (columnDefinition?.currentType === "Image") {
-    return (
-      <Elem name="data-display" mod={{ image: true }}>
-        <img {...imgDefaultProps} ref={imageRef} src={data} />
-      </Elem>
-    );
-  } else if (columnDefinition?.currentType === "Text" && isUrlData && !isFileError) {
-    return (
-      <Elem name="data-display" mod={{ text: true }}>
-        {isInProgress ? <Spinner /> : (
-          <Elem name='textdata' tag="pre">
-            {fileContent}
-          </Elem>
-        )}
-      </Elem>
-    );
-  } else if (isUrlData) {
-    return (
-      <Elem name="data-display" mod={{ link: true }} >
-        <Elem name="data-link" tag="a" href={data} target="_blank">{data}</Elem>
-      </Elem>
-    );
-  }
-  return (
-    <Elem name="data-display" mod={{ [columnDefinition?.currentType ?? "text"]: true }} >
-      {data}
-    </Elem>
-  );
-});
-
-const AttributeRow = (({ fieldName, value }) => {
-  return (
-    <Block name='attributeRow'>
-      <Elem name='name'>{fieldName}</Elem>
-      <Elem name='value'>{value}</Elem>
-    </Block>
-  );
-});
-const dateDisplayFormat = "MMM dd, yyyy HH:mm a";
-
-export const CandidateTaskView = observer(({ item, columns }) => {
-  const { candidate_task_id, id, data, exported } = item;
-  const dataset = getRoot(item)?.SDK?.dataset;
-  const [fName, setFName] = useState();
-  const [fType, setFType] = useState();
-  const [mType, setMType] = useState();
-  const [created, setCreated] = useState();
-  const [modified, setModified] = useState();
-  const [size, setSize] = useState();
-  const [dimensions, setDimensions] = useState([]);
-  const [bucket, setBucket] = useState();
-  const imgRef = useRef({});
-  const associatedList = getRoot(item).taskStore.associatedList;
-
-  useEffect(() => {
-    const setDefaultMetadata = async () => {
-      const { metadata } = await getRoot(item).apiCall("candidateTaskMeta", {
-        candidate_task_id,
-      });
-  
-      if (metadata) {
-        setFName(metadata.name.split('/').pop());
-        setFType(metadata.contentType.split('/').shift());
-        setMType(metadata.contentType);
-        setCreated(metadata.timeCreated ? format(new Date(metadata.timeCreated), dateDisplayFormat) : "");
-        setModified(metadata.updated ? format(new Date(metadata.updated), dateDisplayFormat) : "");
-        setSize(`${new Intl.NumberFormat().format(parseInt(metadata.size))} bytes`);
-        setBucket(metadata.bucket);
-        setDimensions(Object.values(imgRef.current).map(ref => `${ref?.naturalWidth ?? 0} x ${ref?.naturalHeight ?? 0} px`));
-      }
-    };
-    
-    setDefaultMetadata();
-  }, [candidate_task_id]);
-  
-
-  return (
-    <Block name="candidate-task-view">
-      <Elem name="data-display-container">
-        {Object.entries(data).map( ([dataKey, dataValue]) => (
-          <DataItemVisual key={dataKey} columns={columns} dataKey={dataKey} data={dataValue} ref={(ele) => imgRef.current[dataKey] = ele} />
-        ))}
-      </Elem>
-      <Elem name="details">
-        <Elem name="detailContainer">
-          <Elem name="title">File Attributes</Elem>
-          <Elem name="fname">{fName}</Elem>
-        </Elem>
-        <Elem name="detailContainer">
-          <Elem name="detailSubContainer">
-            <Elem name="subtitle">General</Elem>
-            <Elem name="detailContent">
-              <AttributeRow fieldName="ID:" value={id}/>
-              <AttributeRow fieldName="File Type:" value={fType}/>
-              <AttributeRow fieldName="Mime Type:" value={mType}/>
-              <AttributeRow fieldName="Created:" value={created}/>
-              <AttributeRow fieldName="Modified:" value={modified}/>
-              <AttributeRow fieldName="Size:" value={size}/>
-              <AttributeRow fieldName="Dimensions:" value={dimensions.map((dim, key) => <Elem key={key} name='dimension'>{dim}</Elem>)}/>
-              <AttributeRow fieldName="Dataset:" value={dataset?.title}/>
-            </Elem>
-          </Elem>
-          <Elem name="detailSubContainer">
-            <Elem name="subtitle">Origin Storage</Elem>
-            <Elem name="detailContent">
-              <AttributeRow fieldName="Name:" value={fName}/>
-              <AttributeRow fieldName="Bucket:" value={bucket}/>
-              <AttributeRow fieldName="External ID:" value={candidate_task_id}/>
-            </Elem>
-          </Elem>
-          <Elem name="detailSubContainer">
-            <Elem name="subtitle">Projects</Elem>
-            <Elem name="detailContent">{
-              (associatedList.length && exported.length) ? (
-                exported.map((exportedEntry, index) => {
-                  const { project_id, created_at } = exportedEntry;
-                  const associtedRecord = associatedList?.find(associatedItem => associatedItem?.id === project_id);
-                  const { title, workspace } = associtedRecord;
-                  const clickHandler = useCallback(e => {
-                    e.preventDefault();
-                    window.open(`/projects/${project_id}/data`, '_self');
-                  }, [project_id]);
-                  
-                  return (
-                    <Block onClick={clickHandler} name='projectNav' key={index}>
-                      <Elem name='name'>{workspace?.length && `${workspace.join(" - ")} / `}{title}</Elem>
-                      {created_at && <Elem name='date'>Added {format(new Date(created_at), dateDisplayFormat)}</Elem>}
-                    </Block>
-                  );
-                })
-              ) : (
-                <>This file hasn’t been imported to any projects.</>
-              )
-            }</Elem>
-          </Elem>
-        </Elem>
-      </Elem>
-    </Block>
-  );
-});
\ No newline at end of file
diff --git a/src/components/CandidateTaskView/CandidateTaskView.styl b/src/components/CandidateTaskView/CandidateTaskView.styl
deleted file mode 100644
index 0474a206..00000000
--- a/src/components/CandidateTaskView/CandidateTaskView.styl
+++ /dev/null
@@ -1,116 +0,0 @@
-.candidate-task-view
-  --border-color rgba(137, 128, 152, 0.12)
-  --border-color-hard rgba(137, 128, 152, 0.16)
-  display flex
-  gap 16px
-  align-items stretch
-  &__data-display-container
-    display flex
-    flex 1 auto
-    flex-direction column
-    gap 16px
-  &__data-display
-    border 1px solid var(--border-color-hard)
-    flex 1 auto
-    &_image
-      background linear-gradient(0deg, rgba(9, 109, 217, 0.05), rgba(9, 109, 217, 0.05)), #FAFAFA
-      display flex
-      align-items center
-      justify-content center
-      img
-        display block
-        max-width 100%
-        height auto
-        width auto
-        max-height: calc(80vh - var(--header-height) - var(--ribbon-height));
-    &_text,
-    &_link
-      padding 12px 16px
-  &__details
-    background-color #FAFAFA
-    border-radius 8px
-    display flex
-    width 256px
-    border 1px solid var(--border-color-hard)
-    flex-direction column
-    flex-shrink 0
-  &__title
-    font-style normal
-    font-weight 500
-    font-size 16px
-    line-height 24px
-    letter-spacing 0.1px
-    color #1F1F1F
-  &__detailContainer
-    padding 16px
-    border-top 1px solid var(--border-color)
-    &:first-child
-      border-top 0
-  &__detailSubContainer
-    border-top 1px solid var(--border-color)
-    padding 18px 0 8px
-    &:first-child
-      border-top 0
-      padding-top 0
-  &__subtitle
-    font-family 'Roboto'
-    font-weight 500
-    font-size 12px
-    line-height 16px
-    letter-spacing 0.5px
-    color #898098
-    margin-bottom 16px
-  &__detailContent
-    font-family 'Roboto'
-    font-weight 400
-    font-size 12px
-    line-height 16px
-    letter-spacing 0.4px
-    color #898098
-
-.attributeRow
-  display flex
-  justify-content space-between
-  font-family 'Roboto'
-  margin-top 8px
-  flex-wrap wrap
-  &__name
-    font-weight 500
-    font-size 12px
-    line-height 16px
-    letter-spacing 0.5px
-    color #1F1F1F
-  &__value
-    font-weight 400
-    font-size 12px
-    line-height 16px
-    letter-spacing 0.4px
-    color #1F1F1F
-    overflow auto
-  &:first-child
-    margin-top 0
-
-.projectNav
-  margin-top 8px
-  cursor pointer
-  &:first-child
-    margin-top 0
-  &__name
-    font-weight 500
-    font-size 11px
-    line-height 16px
-    letter-spacing 0.5px
-    color #096DD9
-  &__date
-    font-weight 400
-    font-size 12px
-    line-height 16px
-    letter-spacing 0.4px
-    color #898098
-
-@media (max-width 600px)
-  .candidate-task-view
-    flex-direction column
-    &__details
-      width auto
-      flex 1 auto
\ No newline at end of file
diff --git a/src/components/CandidateTaskView/index.js b/src/components/CandidateTaskView/index.js
deleted file mode 100644
index 755a60b5..00000000
--- a/src/components/CandidateTaskView/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { CandidateTaskView } from "./CandidateTaskView";
-export { CandidateTaskView };
\ No newline at end of file
diff --git a/src/components/CellViews/index.js b/src/components/CellViews/index.js
index af9a0cd5..b4dd6c5f 100644
--- a/src/components/CellViews/index.js
+++ b/src/components/CellViews/index.js
@@ -11,4 +11,5 @@ export { DateTimeCell as Date, DateTimeCell as Datetime } from "./DateTimeCell";
 export { ImageCell as Image } from "./ImageCell";
 export { NumberCell as Number } from "./NumberCell";
 export { StringCell as String } from "./StringCell";
+export { StringCell as Text } from "./StringCell";
 export { VideoCell as Video } from "./VideoCell";
diff --git a/src/components/Common/SkeletonLoader/SkeletonGap.tsx b/src/components/Common/SkeletonLoader/SkeletonGap.tsx
new file mode 100644
index 00000000..68b66000
--- /dev/null
+++ b/src/components/Common/SkeletonLoader/SkeletonGap.tsx
@@ -0,0 +1,7 @@
+import { Elem } from '../../../utils/bem';
+
+export const SkeletonGap = ({ height = "4px" }: { height?: string }) => {
+  return (
+    <Elem name='gap' style={{ "--height": height }}/>
+  );
+};
diff --git a/src/components/Common/SkeletonLoader/SkeletonLine.tsx b/src/components/Common/SkeletonLoader/SkeletonLine.tsx
new file mode 100644
index 00000000..4c9d0abb
--- /dev/null
+++ b/src/components/Common/SkeletonLoader/SkeletonLine.tsx
@@ -0,0 +1,14 @@
+import { Elem } from '../../../utils/bem';
+
+export const SkeletonLine = ({ lineCount = 1, width = "60%", height = "16px" }: { lineCount?: number, width?: string, height?: string }) => {
+  const rows = [];
+
+  for(let i = 0; i < lineCount; i++) {
+    rows.push(<Elem name='line' key={i} style={{ "--line-width": width, "--line-height": height }}/>);
+  }
+  return (
+    <>
+      {rows}
+    </>
+  );
+};
diff --git a/src/components/Common/SkeletonLoader/SkeletonLoader.styl b/src/components/Common/SkeletonLoader/SkeletonLoader.styl
new file mode 100644
index 00000000..b8f3cd3b
--- /dev/null
+++ b/src/components/Common/SkeletonLoader/SkeletonLoader.styl
@@ -0,0 +1,45 @@
+.skeletonLoader
+  --skeleton-light-color linear-gradient(0deg, rgba(9, 109, 217, 0.05), rgba(9, 109, 217, 0.05)), #FAFAFA
+  --skeleton-dark-color linear-gradient(0deg, rgba(9, 109, 217, 0.14), rgba(9, 109, 217, 0.14)), #FAFAFA
+  --skeleton-gap 4px
+  box-sizing border-box
+  display flex
+  flex-direction column
+  justify-content space-between
+  gap var(--skeleton-gap)
+  position relative
+  width 100%
+  flex 0 0 auto
+  margin-left 0
+  z-index 1
+  color transparent
+  &__line
+    --line-width 60%
+    --line-height 16px
+    height var(--line-height)
+    width var(--line-width)
+    min-width 20px
+    border-radius 8px
+    display block
+    background var(--skeleton-light-color)
+    animation-name: skeleton-animation;
+    animation-timing-function ease-in-out
+    animation-duration 0.5s
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  &__gap
+    --height 8px
+    height var(--height)
+
+
+@keyframes skeleton-animation
+  0%
+    background var(--skeleton-light-color)
+    opacity 1
+
+  50%
+    opacity 0.8
+
+  100%
+    background var(--skeleton-dark-color)
+    opacity 1
\ No newline at end of file
diff --git a/src/components/Common/SkeletonLoader/SkeletonLoader.tsx b/src/components/Common/SkeletonLoader/SkeletonLoader.tsx
new file mode 100644
index 00000000..7144b83b
--- /dev/null
+++ b/src/components/Common/SkeletonLoader/SkeletonLoader.tsx
@@ -0,0 +1,32 @@
+import React, { ReactChildren } from 'react';
+import './SkeletonLoader.styl';
+import { Block } from '../../../utils/bem';
+import { SkeletonLine } from './SkeletonLine';
+import { SkeletonGap } from './SkeletonGap';
+
+interface SkeletonLoaderProps { 
+  children?: ReactChildren, 
+  gap?: string, 
+  lightColor?: string,
+  darkColor?: string,
+}
+
+export const SkeletonLoader = ({ children, gap = "4px", lightColor, darkColor }: SkeletonLoaderProps) => {
+  const styles:any = { "--skeleton-gap": gap };
+  
+  lightColor && (styles["--skeleton-light-color"] = lightColor);
+  darkColor && (styles["--skeleton-dark-color"] = darkColor);
+
+  return (
+    <Block name="skeletonLoader" style={styles}>
+      {children ? children : (
+        <>
+          <SkeletonLine />
+          <SkeletonGap />
+          <SkeletonLine width="40%" height="24px"/>
+          <SkeletonLine width="50%" height="12px" />
+        </>
+      )}
+    </Block>
+  );
+};
diff --git a/src/components/Common/SkeletonLoader/index.tsx b/src/components/Common/SkeletonLoader/index.tsx
new file mode 100644
index 00000000..381941a4
--- /dev/null
+++ b/src/components/Common/SkeletonLoader/index.tsx
@@ -0,0 +1,3 @@
+export { SkeletonLoader } from "./SkeletonLoader";
+export { SkeletonLine } from "./SkeletonLine";
+export { SkeletonGap } from "./SkeletonGap";
\ No newline at end of file
diff --git a/src/components/Common/Table/TableRow/TableRow.js b/src/components/Common/Table/TableRow/TableRow.js
index b854d425..0d328a76 100644
--- a/src/components/Common/Table/TableRow/TableRow.js
+++ b/src/components/Common/Table/TableRow/TableRow.js
@@ -5,6 +5,8 @@ import { Block } from "../../../../utils/bem";
 import { TableContext, TableElem } from "../TableContext";
 import { getProperty, getStyle } from "../utils";
 import "./TableRow.styl";
+import { SkeletonLoader } from "../../SkeletonLoader";
+import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
 
 const CellRenderer = observer(
   ({ col: colInput, data, decoration, cellViews }) => {
@@ -29,6 +31,7 @@ const CellRenderer = observer(
     const renderProps = { column: col, original: data, value };
     const Decoration = decoration?.get?.(col);
     const style = getStyle(cellViews, col, Decoration);
+    const cellIsLoading = isFF(FF_LOPS_E_3) && data.loading === colInput.alias;
 
     return (
       <TableElem name="cell">
@@ -37,10 +40,10 @@ const CellRenderer = observer(
             ...(style ?? {}),
             display: "flex",
             height: "100%",
-            alignItems: "center",
+            alignItems: cellIsLoading ? "" : "center",
           }}
         >
-          {Renderer ? <Renderer {...renderProps} /> : value}
+          {cellIsLoading ? <SkeletonLoader /> : (Renderer ? <Renderer {...renderProps} /> : value)}
         </div>
       </TableElem>
     );
diff --git a/src/components/Common/TableOld/Table.js b/src/components/Common/TableOld/Table.js
index fcf88f9e..4fde4dbd 100644
--- a/src/components/Common/TableOld/Table.js
+++ b/src/components/Common/TableOld/Table.js
@@ -398,6 +398,8 @@ const StickyList = observer(
               itemCount={totalCount}
               loadMoreItems={loadMore}
               isItemLoaded={isItemLoaded}
+              threshold={5}
+              minimumBatchSize={30}
             >
               {({ onItemsRendered, ref }) => (
                 <TableElem
diff --git a/src/components/Common/TableOld/TableRow/TableRow.js b/src/components/Common/TableOld/TableRow/TableRow.js
index b854d425..c278e92d 100644
--- a/src/components/Common/TableOld/TableRow/TableRow.js
+++ b/src/components/Common/TableOld/TableRow/TableRow.js
@@ -4,7 +4,9 @@ import { toStudlyCaps } from 'strman';
 import { Block } from "../../../../utils/bem";
 import { TableContext, TableElem } from "../TableContext";
 import { getProperty, getStyle } from "../utils";
+import { SkeletonLoader } from "../../SkeletonLoader";
 import "./TableRow.styl";
+import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
 
 const CellRenderer = observer(
   ({ col: colInput, data, decoration, cellViews }) => {
@@ -29,6 +31,7 @@ const CellRenderer = observer(
     const renderProps = { column: col, original: data, value };
     const Decoration = decoration?.get?.(col);
     const style = getStyle(cellViews, col, Decoration);
+    const cellIsLoading = isFF(FF_LOPS_E_3) && data.loading === colInput.alias;
 
     return (
       <TableElem name="cell">
@@ -37,10 +40,10 @@ const CellRenderer = observer(
             ...(style ?? {}),
             display: "flex",
             height: "100%",
-            alignItems: "center",
+            alignItems: cellIsLoading ? "" : "center",
           }}
         >
-          {Renderer ? <Renderer {...renderProps} /> : value}
+          {cellIsLoading ? <SkeletonLoader /> : (Renderer ? <Renderer {...renderProps} /> : value)}
         </div>
       </TableElem>
     );
diff --git a/src/components/DataManager/Toolbar/ActionsButton.js b/src/components/DataManager/Toolbar/ActionsButton.js
index 28c2a91d..a38403f7 100644
--- a/src/components/DataManager/Toolbar/ActionsButton.js
+++ b/src/components/DataManager/Toolbar/ActionsButton.js
@@ -135,7 +135,7 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
   };
 
   const actionButtons = actions.map(ActionButton);
-  const recordTypeLabel = isFFLOPSE3 && store.SDK.type === "DE" ? "Item" : "Task";
+  const recordTypeLabel = isFFLOPSE3 && store.SDK.type === "DE" ? "Record" : "Task";
   
   return (
     <Dropdown.Trigger 
@@ -144,7 +144,7 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
       onToggle={(visible) => isFFLOPSE3 && setIsOpen(visible)}
     >
       <Button {...(isNewUI ? { className:"actionButtonPrime" } : {})} size={size} disabled={!hasSelected} {...rest}>
-        {selectedCount > 0 ? `${selectedCount} ${recordTypeLabel}s`: "Actions"}
+        {selectedCount > 0 ? `${selectedCount} ${recordTypeLabel}${selectedCount > 1 ? "s" : ""}`: "Actions"}
         {isNewUI ? (
           isOpen ? (
             <FaChevronUp size="12" style={{ marginLeft: 4, marginRight: -7 }} />
diff --git a/src/components/Filters/types/String.js b/src/components/Filters/types/String.js
index 00c93fc2..02a25365 100644
--- a/src/components/Filters/types/String.js
+++ b/src/components/Filters/types/String.js
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import React from "react";
 import { FilterInput } from "../FilterInput";
+import { VariantSelect } from "./List";
 
 const BaseInput = observer(({ value, onChange, placeholder }) => {
   return (
@@ -45,4 +46,10 @@ export const StringFilter = [
     valueType: "single",
     input: (props) => <BaseInput {...props} />,
   },
+  {
+    key: "similar_to",
+    label: "similar to",
+    valueType: "list",
+    input: (props) => <VariantSelect {...props} />,
+  },
 ];
diff --git a/src/components/Filters/types/Utility.js b/src/components/Filters/types/Utility.js
index c2db1213..d8445309 100644
--- a/src/components/Filters/types/Utility.js
+++ b/src/components/Filters/types/Utility.js
@@ -1,5 +1,6 @@
 const EXCLUDED_FILTER_OPERATIONS = {
   "DE": ["contains", "not_contains", "regex"],
+  "dm": ["similar_to"],
 };
 
 export const allowedFilterOperations = (operationsList, context = "") => {
diff --git a/src/components/MainView/DataView/DataView.js b/src/components/MainView/DataView/DataView.js
index 1ad18806..69071b7b 100644
--- a/src/components/MainView/DataView/DataView.js
+++ b/src/components/MainView/DataView/DataView.js
@@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 import { FaQuestionCircle } from "react-icons/fa";
 import { useShortcut } from "../../../sdk/hotkeys";
 import { Block, Elem } from "../../../utils/bem";
-import { FF_DEV_2536, FF_DEV_4008, isFF } from '../../../utils/feature-flags';
+import { FF_DEV_2536, FF_DEV_4008, FF_OPTIC_2, isFF } from '../../../utils/feature-flags';
 import * as CellViews from "../../CellViews";
 import { Icon } from "../../Common/Icon/Icon";
 import { DEFAULT_PAGE_SIZE, getStoredPageSize, Pagination, setStoredPageSize } from "../../Common/Pagination/Pagination";
@@ -14,8 +14,6 @@ import { Table } from "../../Common/Table/Table";
 import { Tag } from "../../Common/Tag/Tag";
 import { Tooltip } from "../../Common/Tooltip/Tooltip";
 import { GridView } from "../GridView/GridView";
-import { CandidateTaskView } from "../../CandidateTaskView";
-import { modal } from "../../Common/Modal/Modal";
 import "./DataView.styl";
 import { Button } from "../../Common/Button/Button";
 
@@ -119,18 +117,17 @@ export const DataView = injector(
     }, [view]);
 
     const onRowClick = useCallback(
-      (item, e) => {
+      async (item, e) => {
         const itemID = item.task_id ?? item.id;
 
         if (store.SDK.type === 'DE') {
-          modal({
-            title: `${itemID} Preview`,
-            style:{ width: `80vw` },
-            body: <CandidateTaskView item={item} columns={columns}/>,
-          });
+          store.SDK.invoke('recordPreview', item, columns, getRoot(view).taskStore.associatedList);
         } else if (e.metaKey || e.ctrlKey) {
           window.open(`./?task=${itemID}`, "_blank");
         } else {
+          console.log(item);
+          if (isFF(FF_OPTIC_2)) await self.LSF?.saveDraft();
+
           getRoot(view).startLabeling(item);
         }
       },
diff --git a/src/components/MainView/DataViewOld/Table.js b/src/components/MainView/DataViewOld/Table.js
index 658b331f..c2bffd92 100644
--- a/src/components/MainView/DataViewOld/Table.js
+++ b/src/components/MainView/DataViewOld/Table.js
@@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
 import { FaQuestionCircle } from "react-icons/fa";
 import { useShortcut } from "../../../sdk/hotkeys";
 import { Block, Elem } from "../../../utils/bem";
-import { FF_DEV_2536, FF_DEV_4008, isFF } from '../../../utils/feature-flags';
+import { FF_DEV_2536, FF_DEV_4008, FF_OPTIC_2, isFF } from '../../../utils/feature-flags';
 import * as CellViews from "../../CellViews";
 import { Icon } from "../../Common/Icon/Icon";
 import { ImportButton } from "../../Common/SDKButtons";
@@ -13,9 +13,7 @@ import { Table } from "../../Common/TableOld/Table";
 import { Tag } from "../../Common/Tag/Tag";
 import { Tooltip } from "../../Common/Tooltip/Tooltip";
 import { GridView } from "../GridViewOld/GridView";
-import { CandidateTaskView } from "../../CandidateTaskView";
 import "./Table.styl";
-import { modal } from "../../Common/Modal/Modal";
 import { Button } from "../../Common/Button/Button";
 
 const injector = inject(({ store }) => {
@@ -63,10 +61,11 @@ export const DataView = injector(
       return props.focusedItem;
     }, [props.focusedItem]);
 
-    const loadMore = useCallback(() => {
-      if (!dataStore.hasNextPage || dataStore.loading) return;
+    const loadMore = useCallback(async () => {
+      if (!dataStore.hasNextPage || dataStore.loading) return new Promise();
 
-      dataStore.fetch({ interaction: "scroll" });
+      await dataStore.fetch({ interaction: "scroll" });
+      return new Promise();
     }, [dataStore]);
 
     const isItemLoaded = useCallback(
@@ -115,18 +114,17 @@ export const DataView = injector(
     ]);
 
     const onRowClick = useCallback(
-      (item, e) => {
+      async (item, e) => {
         const itemID = item.task_id ?? item.id;
 
         if (store.SDK.type === 'DE') {
-          modal({
-            title: `${itemID} Preview`,
-            style:{ width: `80vw` },
-            body: <CandidateTaskView item={item} columns={columns}/>,
-          });
+          store.SDK.invoke('recordPreview', item, columns, getRoot(view).taskStore.associatedList);
         } else if (e.metaKey || e.ctrlKey) {
           window.open(`./?task=${itemID}`, "_blank");
         } else {
+          if (isFF(FF_OPTIC_2)) {
+            await store._sdk.lsf?.saveDraft();
+          }
           getRoot(view).startLabeling(item);
         }
       },
diff --git a/src/components/MainView/GridView/GridView.js b/src/components/MainView/GridView/GridView.js
index 16236ee4..35766ddb 100644
--- a/src/components/MainView/GridView/GridView.js
+++ b/src/components/MainView/GridView/GridView.js
@@ -8,6 +8,8 @@ import { Space } from "../../Common/Space/Space";
 import { getProperty, prepareColumns } from "../../Common/Table/utils";
 import * as DataGroups from "../../DataGroups";
 import "./GridView.styl";
+import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { SkeletonLoader } from "../../Common/SkeletonLoader";
 
 const GridHeader = observer(({ row, selected }) => {
   return (
@@ -42,10 +44,12 @@ const GridBody = observer(({ row, fields }) => {
 const GridDataGroup = observer(({ type, value, field, row }) => {
   const DataTypeComponent = DataGroups[type];
 
-  return DataTypeComponent ? (
-    <DataTypeComponent value={value} field={field} original={row} />
-  ) : (
-    <DataGroups.TextDataGroup value={value} field={field} original={row} />
+  return (isFF(FF_LOPS_E_3) && row.loading === field.alias) ? <SkeletonLoader /> : (
+    DataTypeComponent ? (
+      <DataTypeComponent value={value} field={field} original={row} />
+    ) : (
+      <DataGroups.TextDataGroup value={value} field={field} original={row} />
+    )
   );
 });
 
diff --git a/src/components/MainView/GridView/GridView.styl b/src/components/MainView/GridView/GridView.styl
index c98eb91c..23977210 100644
--- a/src/components/MainView/GridView/GridView.styl
+++ b/src/components/MainView/GridView/GridView.styl
@@ -50,3 +50,6 @@
 
       &::after
         box-shadow 0 0 0 1px rgba(26, 144, 255, 0.6) inset
+
+  .skeletonLoader
+    padding 5px
\ No newline at end of file
diff --git a/src/components/MainView/GridViewOld/GridView.js b/src/components/MainView/GridViewOld/GridView.js
index 8dc7e573..6ab71a55 100644
--- a/src/components/MainView/GridViewOld/GridView.js
+++ b/src/components/MainView/GridViewOld/GridView.js
@@ -9,6 +9,8 @@ import { Space } from "../../Common/Space/Space";
 import { getProperty, prepareColumns } from "../../Common/Table/utils";
 import * as DataGroups from "../../DataGroups";
 import "./GridView.styl";
+import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { SkeletonLoader } from "../../Common/SkeletonLoader";
 
 const GridHeader = observer(({ row, selected }) => {
   return (
@@ -43,10 +45,12 @@ const GridBody = observer(({ row, fields }) => {
 const GridDataGroup = observer(({ type, value, field, row }) => {
   const DataTypeComponent = DataGroups[type];
 
-  return DataTypeComponent ? (
-    <DataTypeComponent value={value} field={field} original={row} />
-  ) : (
-    <DataGroups.TextDataGroup value={value} field={field} original={row} />
+  return (isFF(FF_LOPS_E_3) && row.loading === field.alias) ? <SkeletonLoader /> : (
+    DataTypeComponent ? (
+      <DataTypeComponent value={value} field={field} original={row} />
+    ) : (
+      <DataGroups.TextDataGroup value={value} field={field} original={row} />
+    )
   );
 });
 
@@ -166,6 +170,8 @@ export const GridView = observer(
               itemCount={itemCount}
               isItemLoaded={isItemLoaded}
               loadMoreItems={loadMore}
+              threshold={5}
+              minimumBatchSize={30}
             >
               {({ onItemsRendered, ref }) => (
                 <Elem
diff --git a/src/components/MainView/GridViewOld/GridView.styl b/src/components/MainView/GridViewOld/GridView.styl
index ba2b2bea..8aa63297 100644
--- a/src/components/MainView/GridViewOld/GridView.styl
+++ b/src/components/MainView/GridViewOld/GridView.styl
@@ -47,3 +47,6 @@
 
       &::after
         box-shadow 0 0 0 1px rgba(26, 144, 255, 0.6) inset
+
+  .skeletonLoader
+    padding 5px
\ No newline at end of file
diff --git a/src/mixins/DataStore/DataStoreItem.js b/src/mixins/DataStore/DataStoreItem.js
index c5522807..25282b24 100644
--- a/src/mixins/DataStore/DataStoreItem.js
+++ b/src/mixins/DataStore/DataStoreItem.js
@@ -1,10 +1,14 @@
 import { applySnapshot, getParent, getSnapshot, types } from "mobx-state-tree";
 import { guidGenerator } from "../../utils/random";
+import { FF_LOPS_E_3, isFF } from "../../utils/feature-flags";
 
 export const DataStoreItem = types
   .model("DataStoreItem", {
     updated: guidGenerator(),
-    loading: false,
+    loading: isFF(FF_LOPS_E_3) ? types.maybeNull(types.union(
+      types.string,
+      types.boolean,
+    ), false) : false,
   })
   .views((self) => ({
     get parent() {
diff --git a/src/sdk/lsf-sdk.js b/src/sdk/lsf-sdk.js
index 63fad172..5adf08ba 100644
--- a/src/sdk/lsf-sdk.js
+++ b/src/sdk/lsf-sdk.js
@@ -20,6 +20,7 @@ import {
   FF_DEV_3034,
   FF_DEV_3734,
   FF_LSDV_4620_3_ML,
+  FF_OPTIC_2,
   isFF
 } from "../utils/feature-flags";
 import { isDefined } from "../utils/utils";
@@ -308,6 +309,10 @@ export class LSFWrapper {
     await nextAction();
   }
 
+  exitStream() {
+    this.datamanager.invoke("navigate", 'projects');
+  }
+
   selectTask(task, annotationID, fromHistory = false) {
     const needsAnnotationsMerge = task && this.task?.id === task.id;
     const annotations = needsAnnotationsMerge ? [...this.annotations] : [];
@@ -396,7 +401,6 @@ export class LSFWrapper {
           c = cs.annotations.find(c => c.pk === draftAnnotationPk);
           if (c) {
             c.history.freeze();
-            console.log("Applying draft");
             c.addVersions({ draft: draft.result });
             c.deleteAllRegions({ deleteReadOnly: true });
           } else {
@@ -549,6 +553,9 @@ export class LSFWrapper {
 
   /** @private */
   onSubmitAnnotation = async () => {
+    const exitStream = this.shouldExitStream();
+    const loadNext = exitStream ? false : this.shouldLoadNext();
+    
     await this.submitCurrentAnnotation("submitAnnotation", async (taskID, body) => {
       return await this.datamanager.apiCall(
         "submitAnnotation",
@@ -557,13 +564,14 @@ export class LSFWrapper {
         // don't react on duplicated annotations error
         { errorHandler: result => result.status === 409 },
       );
-    }, false, this.shouldLoadNext());
+    }, false, loadNext, exitStream);
   };
 
   /** @private */
   onUpdateAnnotation = async (ls, annotation, extraData) => {
     const { task } = this;
     const serializedAnnotation = this.prepareData(annotation);
+    const exitStream = this.shouldExitStream();
 
     Object.assign(serializedAnnotation, extraData);
 
@@ -584,6 +592,8 @@ export class LSFWrapper {
 
     this.datamanager.invoke("updateAnnotation", ls, annotation, result);
 
+    if (exitStream) return  this.exitStream();
+
     const isRejectedQueue = isDefined(task.default_selected_annotation);
 
     if (isRejectedQueue) {
@@ -636,6 +646,18 @@ export class LSFWrapper {
     }
   };
 
+  saveDraft = async (target = null) => {
+    const selected = target || this.lsf?.annotationStore?.selected;
+    const hasChanges = !!selected?.history.undoIdx && !selected?.submissionStarted;
+
+    if (!hasChanges || !selected) return;
+    const res = await selected?.saveDraftImmediatelyWithResults();
+    const status = res?.$meta?.status;
+
+    if (status === 200 || status === 201) return this.datamanager.invoke("toast", { message: "Draft saved successfully", type: "info" });
+    else if (status !== undefined) return this.datamanager.invoke("toast", { message: "There was an error saving your draft", type: "error" });
+  };
+  
   onSubmitDraft = async (studio, annotation, params = {}) => {
     const annotationDoesntExist = !annotation.pk;
     const data = { body: this.prepareData(annotation, { draft: true }) }; // serializedAnnotation
@@ -646,7 +668,10 @@ export class LSFWrapper {
 
     if (annotation.draftId > 0) {
       // draft has been already created
-      return this.datamanager.apiCall("updateDraft", { draftID: annotation.draftId }, data);
+      const res = await this.datamanager.apiCall("updateDraft", { draftID: annotation.draftId }, data);
+
+      return res;
+
     } else {
       let response;
 
@@ -660,6 +685,7 @@ export class LSFWrapper {
         );
       }
       response?.id && annotation.setDraftId(response?.id);
+      return response;
     }
   };
 
@@ -740,24 +766,42 @@ export class LSFWrapper {
     return urlParam !== 'notifications';
   }
 
+  shouldExitStream = () => {
+    const paramName = "exitStream";
+    const urlParam = new URLSearchParams(location.search).get(paramName);
+    const searchParams = new URLSearchParams(window.location.search);
+
+    searchParams.delete(paramName);
+    let newRelativePathQuery = window.location.pathname;
+
+    if (searchParams.toString()) newRelativePathQuery += '?' + searchParams.toString();
+    window.history.pushState(null, '', newRelativePathQuery);
+    return !!urlParam;
+  }
+
+
   // Proxy events that are unused by DM integration
   onEntityCreate = (...args) => this.datamanager.invoke("onEntityCreate", ...args);
   onEntityDelete = (...args) => this.datamanager.invoke("onEntityDelete", ...args);
   onSelectAnnotation = (prevAnnotation, nextAnnotation, options) => {
-    this.datamanager.invoke("onSelectAnnotation", prevAnnotation, nextAnnotation, options, this);
+    if (isFF(FF_OPTIC_2) && !!nextAnnotation?.history?.undoIdx) {
+      this.saveDraft(nextAnnotation).then(() => {
+        this.datamanager.invoke("onSelectAnnotation", prevAnnotation, nextAnnotation, options, this);
+      });
+    } else {
+      this.datamanager.invoke("onSelectAnnotation", prevAnnotation, nextAnnotation, options, this);
+    }
   }
 
-  onNextTask = (nextTaskId, nextAnnotationId) => {
-    console.log(nextTaskId, nextAnnotationId);
-
+  onNextTask = async (nextTaskId, nextAnnotationId) => {
+    if (isFF(FF_OPTIC_2)) this.saveDraft();
     this.loadTask(nextTaskId, nextAnnotationId, true);
   }
-  onPrevTask = (prevTaskId, prevAnnotationId) => {
-    console.log(prevTaskId, prevAnnotationId);
-
+  onPrevTask = async (prevTaskId, prevAnnotationId) => {
+    if (isFF(FF_OPTIC_2)) this.saveDraft();
     this.loadTask(prevTaskId, prevAnnotationId, true);
   }
-  async submitCurrentAnnotation(eventName, submit, includeId = false, loadNext = true) {
+  async submitCurrentAnnotation(eventName, submit, includeId = false, loadNext = true, exitStream) {
     const { taskID, currentAnnotation } = this;
     const unique_id = this.task.unique_lock_id;
     const serializedAnnotation = this.prepareData(currentAnnotation, { includeId });
@@ -789,11 +833,10 @@ export class LSFWrapper {
       if (isFF(FF_DEV_2887) && ['submitAnnotation', 'skipTask'].includes(eventName) && this.lsf?.commentStore?.persistQueuedComments) {
         await this.lsf.commentStore.persistQueuedComments();
       }
-
-      // this.history?.add(taskID, currentAnnotation.pk);
     }
 
     this.setLoading(false);
+    if (exitStream) return this.exitStream();
 
     if (!loadNext || this.datamanager.isExplorer) {
       await this.loadTask(taskID, currentAnnotation.pk, true);
@@ -806,11 +849,14 @@ export class LSFWrapper {
   prepareData(annotation, { includeId, draft } = {}) {
     const userGenerate =
       !annotation.userGenerate || annotation.sentUserGenerate;
+    
+    const sessionTime = (new Date() - annotation.loadedDate) / 1000;
+    const submittedTime = Number(annotation.leadTime ?? 0);
+    const draftTime = Number(this.task.drafts[0]?.lead_time ?? 0);
+    const lead_time = sessionTime + submittedTime + draftTime;
 
     const result = {
-      // task execution time, always summed up with previous values
-      lead_time: (new Date() - annotation.loadedDate) / 1000 + Number(annotation.leadTime ?? 0),
-      // don't serialize annotations twice for drafts
+      lead_time,
       result: (draft ? annotation.versions.draft : annotation.serializeAnnotation()) ?? [],
       draft_id: annotation.draftId,
       parent_prediction: annotation.parent_prediction,
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 4c93e07d..48e2b9c4 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -551,10 +551,14 @@ export const AppStore = types
         }
 
         if (result.response) {
-          self.serverError.set(methodName, {
-            error: "Something went wrong",
-            response: result.response,
-          });
+          try {
+            self.serverError.set(methodName, {
+              error: "Something went wrong",
+              response: result.response,
+            });
+          } catch {
+            // ignore
+          }
         }
 
         console.warn({
@@ -569,7 +573,11 @@ export const AppStore = types
         //   description: result?.response?.detail ?? result.error,
         // });
       } else {
-        self.serverError.delete(methodName);
+        try {
+          self.serverError.delete(methodName);
+        } catch {
+          // ignore
+        }
       }
 
       return result;
diff --git a/src/stores/DataStores/tasks.js b/src/stores/DataStores/tasks.js
index 963035d9..1ea7c0e1 100644
--- a/src/stores/DataStores/tasks.js
+++ b/src/stores/DataStores/tasks.js
@@ -38,7 +38,7 @@ export const create = (columns) => {
     ...(isFF(FF_LOPS_E_3) ? { 
       _additional: types.optional(fileAttributes, {}),
       candidate_task_id: types.optional(types.string, ""),
-      exported: types.optional(types.array(exportedModel), []),
+      project: types.union(types.number, types.optional(types.array(exportedModel), [])), //number for Projects, array of exportedModel for Datasets
     } : {}),
   })
     .views((self) => ({
diff --git a/src/stores/Tabs/tab.js b/src/stores/Tabs/tab.js
index ec139e71..8b7924c1 100644
--- a/src/stores/Tabs/tab.js
+++ b/src/stores/Tabs/tab.js
@@ -15,7 +15,7 @@ import { TabHiddenColumns } from "./tab_hidden_columns";
 import { TabSelectedItems } from "./tab_selected_items";
 import { History } from '../../utils/history';
 import { FF_LOPS_12, isFF } from "../../utils/feature-flags";
-import { StringOrNumberID } from "../types";
+import { CustomJSON, StringOrNumberID } from "../types";
 
 export const Tab = types
   .model("View", {
@@ -50,7 +50,7 @@ export const Tab = types
     locked: false,
     editable: true,
     deletable: true,
-    search_text: types.optional(types.maybeNull(types.string), null),
+    semantic_search: types.optional(types.array(CustomJSON), []),
   })
   .volatile(() => {
     const defaultWidth = getComputedStyle(document.body).getPropertyValue("--menu-sidebar-width").replace("px", "").trim();
@@ -214,7 +214,7 @@ export const Tab = types
         columnsWidth: self.columnsWidth.toPOJO(),
         columnsDisplayType: self.columnsDisplayType.toPOJO(),
         gridWidth: self.gridWidth,
-        search_text: self.search_text,
+        semantic_search: self.semantic_search?.toJSON() ?? [],
       };
 
       if (self.saved || apiVersion === 1) {
@@ -228,6 +228,7 @@ export const Tab = types
         Object.assign(tab, data);
       }
 
+      self.root.SDK.invoke("tabTypeChanged", { tab: tab.id, type: self.type });
       return tab;
     },
   }))
@@ -245,6 +246,7 @@ export const Tab = types
 
     setType(type) {
       self.type = type;
+      self.root.SDK.invoke("tabTypeChanged", { tab: self.id, type });
       self.save();
     },
 
@@ -299,9 +301,9 @@ export const Tab = types
       self.selected = ids;
     },
 
-    setSearchText(searchText) {
-      self.search_text = searchText;
-      self.save();
+    setSemanticSearch(semanticSearchList) {
+      self.semantic_search = semanticSearchList ?? [];
+      return self.save();
     },
 
     selectAll() {
diff --git a/src/utils/feature-flags.js b/src/utils/feature-flags.js
index 6f5e28e4..d6cc99a3 100644
--- a/src/utils/feature-flags.js
+++ b/src/utils/feature-flags.js
@@ -76,6 +76,12 @@ export const FF_LSDV_5035 = 'fflag_feat_back_lsdv_5035_use_created_at_from_draft
  */
 export const FF_LOPS_E_10 = "fflag_feat_front_lops_e_10_updated_ux_short";
 
+/**
+ * Save draft on leave annotation editor
+ */
+export const FF_OPTIC_2 = "fflag_feat_optic_2_ensure_draft_saved_short";
+
+
 // Customize flags
 const flags = {};
 
diff --git a/webpack.config-builder.js b/webpack.config-builder.js
index b0637e46..3bbf9572 100644
--- a/webpack.config-builder.js
+++ b/webpack.config-builder.js
@@ -5,19 +5,18 @@ const webpack = require("webpack");
 const Dotenv = require("dotenv-webpack");
 const TerserPlugin = require("terser-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const { EnvironmentPlugin } = require("webpack");
 
 const workingDirectory = process.env.WORK_DIR
   ? path.resolve(__dirname, process.env.WORK_DIR)
   : path.resolve(__dirname, "build");
 
 if (workingDirectory) {
-  console.log(`Working directory set as ${workingDirectory}`)
+  console.log(`Working directory set as ${workingDirectory}`);
 }
 
 const customDistDir = !!process.env.WORK_DIR;
 
-const DEFAULT_NODE_ENV = process.env.BUILD_MODULE ? 'production' : (process.env.NODE_ENV || 'development')
+const DEFAULT_NODE_ENV = process.env.BUILD_MODULE ? 'production' : (process.env.NODE_ENV || 'development');
 
 const isDevelopment = DEFAULT_NODE_ENV !== "production";
 
@@ -38,7 +37,6 @@ const LOCAL_ENV = {
   NODE_ENV: DEFAULT_NODE_ENV,
   BUILD_NO_SERVER: BUILD.NO_SERVER,
   CSS_PREFIX: "dm-",
-  API_GATEWAY: "http://localhost:8081/api/dm",
   LS_ACCESS_TOKEN: "",
 };
 
@@ -69,7 +67,7 @@ const optimizer = () => {
       new CssMinimizerPlugin({
         parallel: true,
       }),
-    )
+    );
   }
 
   if (BUILD.NO_MINIMIZE) {
@@ -79,7 +77,7 @@ const optimizer = () => {
 
   if (BUILD.NO_CHUNKS) {
     result.runtimeChunk = false;
-    result.splitChunks = { cacheGroups: { default: false } }
+    result.splitChunks = { cacheGroups: { default: false } };
   }
 
   return result;
@@ -131,7 +129,7 @@ const babelLoader = {
   options: {
     presets: [
       ["@babel/preset-react", {
-        "runtime": "automatic"
+        "runtime": "automatic",
       }],
       "@babel/preset-typescript",
       [
@@ -192,12 +190,12 @@ const devServer = () => {
       hot: true,
       port: 9000,
       static: {
-        directory: path.join(__dirname, "public")
+        directory: path.join(__dirname, "public"),
       },
       historyApiFallback: {
         index: "./public/index.html",
       },
-    }
+    },
   } : {};
 };
 
@@ -208,7 +206,6 @@ const plugins = [
     allowEmptyValues: true,
     defaults: "./.env.defaults",
   }),
-  new EnvironmentPlugin(LOCAL_ENV),
   new MiniCssExtractPlugin({
     ...cssOutput(),
   }),
@@ -236,7 +233,7 @@ module.exports = ({ withDevServer = false } = {}) => ({
   ...(withDevServer ? devServer() : {}),
   entry: {
     main: [
-      path.resolve(__dirname, "src/index.js")
+      path.resolve(__dirname, "src/index.js"),
     ],
   },
   output: {