Merge branch 'main' of https://github.com/LemmyNet/lemmy-ui into bugfix/make-post-creator-badge-stand-out-more

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0",
+  "version": "0.18.1-rc.1",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",

src/assets/css/main.css

@@ -198,9 +198,9 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  min-height: 60px;
+  aspect-ratio: 4/3;
-  max-height: 80px;
   width: 100%;
+  max-height: 6rem;
 }
 
 .thumbnail svg {
@@ -360,8 +360,9 @@ br.big {
 }
 
 .img-icon {
-  width: 2rem;
+  width: calc(var(--bs-body-line-height) * 1em);
-  height: 2rem;
+  height: calc(var(--bs-body-line-height) * 1em);
+  border-radius: 0.25em;
 }
 
 .tribute-container ul {

src/assets/css/themes/_variables.scss

@@ -1,7 +1,3 @@
 $link-decoration: none;
 $min-contrast-ratio: 3;
 $font-size-base: 0.875rem;
-
-$container-max-widths: (
-  lg: 1140px,
-);

src/assets/css/themes/darkly-red.css

@@ -726,7 +726,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -736,11 +740,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/assets/css/themes/darkly.css

@@ -726,7 +726,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -736,11 +740,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/assets/css/themes/litely-red.css

@@ -725,7 +725,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -735,11 +739,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/assets/css/themes/litely.css

@@ -725,7 +725,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -735,11 +739,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/shared/components/app/navbar.tsx

@@ -79,8 +79,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
+      <div className="shadow-sm">
         <nav
-        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
+          className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
           id="navbar"
         >
           <NavLink
@@ -321,7 +322,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           "unread_registration_applications",
                           {
                             count: Number(this.unreadApplicationCount),
-                          formattedCount: numToSI(this.unreadApplicationCount),
+                            formattedCount: numToSI(
+                              this.unreadApplicationCount
+                            ),
                           }
                         )}
                         onMouseUp={linkEvent(this, handleCollapseClick)}
@@ -428,6 +431,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             </ul>
           </div>
         </nav>
+      </div>
     );
   }
 

src/shared/components/common/pictrs-image.tsx

@@ -39,7 +39,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "rounded-circle img-cover img-icon me-2": this.props.icon,
+            "img-cover img-icon me-1": this.props.icon,
             "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,

src/shared/components/common/vote-buttons.tsx

@@ -104,7 +104,7 @@ export class VoteButtonsCompact extends Component<
 
   render() {
     return (
-      <div>
+      <>
         <button
           type="button"
           className={`btn-animate btn py-0 px-1 ${
@@ -157,7 +157,7 @@ export class VoteButtonsCompact extends Component<
             )}
           </button>
         )}
-      </div>
+      </>
     );
   }
 }
@@ -174,7 +174,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
 
   render() {
     return (
-      <div className="vote-bar col-1 pe-0 small text-center">
+      <div className="vote-bar pe-0 small text-center">
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${

src/shared/components/community/community.tsx

@@ -317,7 +317,10 @@ export class Community extends Component<
             />
 
             <div className="row">
-              <main className="col-12 col-md-8" ref={this.mainContentRef}>
+              <main
+                className="col-12 col-md-8 col-lg-9"
+                ref={this.mainContentRef}
+              >
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
@@ -340,7 +343,7 @@ export class Community extends Component<
                 {this.listings(res)}
                 <Paginator page={page} onChange={this.handlePageChange} />
               </main>
-              <aside className="d-none d-md-block col-md-4">
+              <aside className="d-none d-md-block col-md-4 col-lg-3">
                 {this.sidebar(res)}
               </aside>
             </div>

src/shared/components/home/home.tsx

@@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> {
         />
         {site_setup && (
           <div className="row">
-            <main role="main" className="col-12 col-md-8">
+            <main role="main" className="col-12 col-md-8 col-lg-9">
               {tagline && (
                 <div
                   id="tagline"
@@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> {
               <div className="d-block d-md-none">{this.mobileView}</div>
               {this.posts}
             </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
               {this.mySidebar}
             </aside>
           </div>

src/shared/components/home/signup.tsx

@@ -140,7 +140,10 @@ export class Signup extends Component<any, State> {
   registerForm() {
     const siteView = this.state.siteRes.site_view;
     return (
-      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
+      <form
+        className="was-validated"
+        onSubmit={linkEvent(this, this.handleRegisterSubmit)}
+      >
         <h5>{this.titleName(siteView)}</h5>
 
         {this.isLemmyMl && (

src/shared/components/home/site-form.tsx

@@ -4,6 +4,7 @@ import {
   Component,
   InfernoKeyboardEvent,
   InfernoMouseEvent,
+  InfernoNode,
   linkEvent,
 } from "inferno";
 import {
@@ -13,6 +14,7 @@ import {
   Instance,
   ListingType,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
@@ -55,6 +57,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   initSiteForm(): EditSite {
     const site = this.props.siteRes.site_view.site;
     const ls = this.props.siteRes.site_view.local_site;
+
     return {
       name: site.name,
       sidebar: site.sidebar,
@@ -619,6 +622,19 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     );
   }
 
+  componentDidUpdate(
+    prevProps: Readonly<{ children?: InfernoNode } & SiteFormProps>
+  ) {
+    if (
+      !(
+        deepEqual(prevProps.allowedInstances, this.props.allowedInstances) ||
+        deepEqual(prevProps.blockedInstances, this.props.blockedInstances)
+      )
+    ) {
+      this.setState({ siteForm: this.initSiteForm() });
+    }
+  }
+
   federatedInstanceSelect(key: InstanceKey) {
     const id = `create_site_${key}`;
     const value = this.state.instance_select[key];

src/shared/components/person/profile.tsx

@@ -205,6 +205,7 @@ export class Profile extends Component<
     this.handleSavePost = this.handleSavePost.bind(this);
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
+    this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
@@ -691,6 +692,8 @@ export class Profile extends Component<
             >
               {I18NextService.i18n.t("cancel")}
             </button>
+          </div>
+          <div className="mb-3 row">
             <button
               type="submit"
               className="btn btn-secondary"
@@ -987,6 +990,7 @@ export class Profile extends Component<
           s.personRes.data.comments
             .filter(c => c.creator.id == banRes.data.person_view.person.id)
             .forEach(c => (c.creator.banned = banRes.data.banned));
+          s.personRes.data.person_view.person.banned = banRes.data.banned;
         }
         return s;
       });

src/shared/components/post/metadata-card.tsx

@@ -8,23 +8,16 @@ interface MetadataCardProps {
   post: Post;
 }
 
-interface MetadataCardState {
+export class MetadataCard extends Component<MetadataCardProps> {
-  expanded: boolean;
-}
-
-export class MetadataCard extends Component<
-  MetadataCardProps,
-  MetadataCardState
-> {
   constructor(props: any, context: any) {
     super(props, context);
   }
 
   render() {
     const post = this.props.post;
+
+    if (post.embed_title && post.url) {
       return (
-      <>
-        {post.embed_title && post.url && (
         <div className="post-metadata-card card border-secondary mt-3 mb-2">
           <div className="row">
             <div className="col-12">
@@ -60,8 +53,9 @@ export class MetadataCard extends Component<
             </div>
           </div>
         </div>
-        )}
-      </>
       );
+    } else {
+      return <></>;
+    }
   }
 }

src/shared/components/post/post-listing.tsx

@@ -49,7 +49,7 @@ import {
   PurgeType,
   VoteContentType,
 } from "../../interfaces";
-import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
+import { mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@@ -105,6 +105,9 @@ interface PostListingProps {
   allLanguages: Language[];
   siteLanguages: number[];
   showCommunity?: boolean;
+  /**
+   * Controls whether to show both the body *and* the metadata preview card
+   */
   showBody?: boolean;
   hideImage?: boolean;
   enableDownvotes?: boolean;
@@ -183,7 +186,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         addModLoading: false,
         addAdminLoading: false,
         transferLoading: false,
-        imageExpanded: false,
       });
     }
   }
@@ -201,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <>
             {this.listing()}
             {this.state.imageExpanded && !this.props.hideImage && this.img}
-            {post.url && this.state.showBody && post.embed_title && (
+            {this.showBody && post.url && post.embed_title && (
               <MetadataCard post={post} />
             )}
             {this.showBody && this.body()}
@@ -397,7 +399,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <span className="small">
-        <PersonListing person={post_view.creator} muted={true} />
+        <PersonListing person={post_view.creator} />
         {this.creatorIsMod_ && (
           <span className="mx-1 badge text-bg-light">
             {I18NextService.i18n.t("mod")}
@@ -482,26 +484,22 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               this.postLink
             )}
           </h5>
-          {(url && isImage(url)) ||
+
-            (post.thumbnail_url && (
+          {/**
-              <button
+           * If there is a URL, an embed title, and we were not told to show the
-                className="btn btn-sm text-monospace text-muted d-inline-block"
+           * body by the parent component, show the MetadataCard/body toggle.
-                data-tippy-content={I18NextService.i18n.t("expand_here")}
+           */}
-                onClick={linkEvent(this, this.handleImageExpandClick)}
+          {!this.props.showBody &&
-              >
+            post.url &&
-                <Icon
+            post.embed_title &&
-                  icon={
+            this.showPreviewButton()}
-                    !this.state.imageExpanded ? "plus-square" : "minus-square"
+
-                  }
-                  classes="icon-inline"
-                />
-              </button>
-            ))}
           {post.removed && (
             <small className="ms-2 badge text-bg-secondary">
               {I18NextService.i18n.t("removed")}
             </small>
           )}
+
           {post.deleted && (
             <small
               className="unselectable pointer ms-2 text-muted fst-italic"
@@ -510,6 +508,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <Icon icon="trash" classes="icon-inline text-danger" />
             </small>
           )}
+
           {post.locked && (
             <small
               className="unselectable pointer ms-2 text-muted fst-italic"
@@ -518,6 +517,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <Icon icon="lock" classes="icon-inline text-danger" />
             </small>
           )}
+
           {post.featured_community && (
             <small
               className="unselectable pointer ms-2 text-muted fst-italic"
@@ -529,6 +529,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <Icon icon="pin" classes="icon-inline text-primary" />
             </small>
           )}
+
           {post.featured_local && (
             <small
               className="unselectable pointer ms-2 text-muted fst-italic"
@@ -538,6 +539,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <Icon icon="pin" classes="icon-inline text-secondary" />
             </small>
           )}
+
           {post.nsfw && (
             <small className="ms-2 badge text-bg-danger">
               {I18NextService.i18n.t("nsfw")}
@@ -634,27 +636,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  showPreviewButton() {
-    const post_view = this.postView;
-    const body = post_view.post.body;
-
-    return (
-      <button
-        className="btn btn-sm btn-animate text-muted py-0"
-        data-tippy-content={body && mdNoImages.render(body)}
-        data-tippy-allowHtml={true}
-        onClick={linkEvent(this, this.handleShowBody)}
-      >
-        <Icon
-          icon="book-open"
-          classes={classNames("icon-inline me-1", {
-            "text-success": this.state.showBody,
-          })}
-        />
-      </button>
-    );
-  }
-
   postActions() {
     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
     // Possible enhancement: Make each button a component.
@@ -666,14 +647,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {this.saveButton}
         {this.crossPostButton}
 
-        {/**
+        {this.props.showBody && post_view.post.body && this.viewSourceButton}
-         * If there is a URL, or if the post has a body and we were told not to
-         * show the body, show the MetadataCard/body toggle.
-         */}
-        {(post.url || (post.body && !this.props.showBody)) &&
-          this.showPreviewButton()}
-
-        {this.showBody && post_view.post.body && this.viewSourceButton}
 
         <div className="dropdown">
           <button
@@ -1397,15 +1371,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  showBodyPreview() {
+  showPreviewButton() {
-    const { body, id } = this.postView.post;
+    return (
-
+      <button
-    return !this.showBody && body ? (
+        type="button"
-      <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
+        className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
-        <div className="md-div mb-1 preview-lines">{body}</div>
+        onClick={linkEvent(this, this.handleShowBody)}
-      </Link>
+      >
-    ) : (
+        <Icon
-      <></>
+          icon={!this.state.showBody ? "plus-square" : "minus-square"}
+          classes="icon-inline"
+        />
+      </button>
     );
   }
 
@@ -1421,9 +1398,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {/* If it has a thumbnail, do a right aligned thumbnail */}
               {this.mobileThumbnail()}
 
-              {/* Show a preview of the post body */}
-              {this.showBodyPreview()}
-
               {this.commentsLine(true)}
               {this.userActionsLine()}
               {this.duplicatesLine()}
@@ -1436,6 +1410,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="d-none d-sm-block">
           <article className="row post-container">
             {!this.props.viewOnly && (
+              <div className="col flex-grow-0">
                 <VoteButtons
                   voteContentType={VoteContentType.Post}
                   id={this.postView.post.id}
@@ -1444,16 +1419,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   counts={this.postView.counts}
                   my_vote={this.postView.my_vote}
                 />
+              </div>
             )}
-            <div className="col-sm-2 pe-0 post-media">
+            <div className="col flex-grow-1">
+              <div className="row">
+                <div className="col-sm-3 col-lg-2 pe-0 post-media">
                   <div className="">{this.thumbnail()}</div>
                 </div>
-            <div className="col-12 col-sm-9">
+                <div className="col-12 col-sm-9 col-lg-10">
-              <div className="row">
-                <div className="col-12">
                   {this.postTitleLine()}
                   {this.createdLine()}
-                  {this.showBodyPreview()}
                   {this.commentsLine()}
                   {this.duplicatesLine()}
                   {this.userActionsLine()}

src/shared/components/post/post.tsx

@@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
         const res = this.state.postRes.data;
         return (
           <div className="row">
-            <main className="col-12 col-md-8 mb-3">
+            <main className="col-12 col-md-8 col-lg-9 mb-3">
               <HtmlTags
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
@@ -416,7 +416,7 @@ export class Post extends Component<any, PostState> {
               {this.state.commentViewType == CommentViewType.Flat &&
                 this.commentsFlat()}
             </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
               {this.sidebar()}
             </aside>
           </div>

src/shared/config.ts

@@ -21,7 +21,7 @@ export const markdownFieldCharacterLimit = 50000;
 export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
 export const updateUnreadCountsInterval = 30000;
-export const fetchLimit = 40;
+export const fetchLimit = 20;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";
 

webpack.config.js

@@ -6,8 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin");
 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
 const merge = require("lodash.merge");
 const { ServiceWorkerPlugin } = require("service-worker-webpack");
-const BundleAnalyzerPlugin =
+
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const banner = `
   hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
   Source code: https://github.com/LemmyNet/lemmy-ui
@@ -156,6 +155,8 @@ const createClientConfig = (_env, mode) => {
   });
 
   if (mode === "none") {
+    const BundleAnalyzerPlugin =
+      require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
     config.plugins.push(new BundleAnalyzerPlugin());
   }