Dont render detailsmodal until clicked. Fixes #261 (#263)

* Dont render detailsmodal until clicked. Fixes #261

* Make true.

src/shared/components/instances.tsx

@@ -93,20 +93,36 @@ const InstanceCardGrid = ({ instances }: InstanceCardGridProps) => (
   </div>
 );
 
-interface InstanceCardProps {
-  instance: any;
-}
-
 function buildUrl(domain: string): string {
   return `https://${domain}`;
 }
 
-const InstanceCard = ({ instance }: InstanceCardProps) => {
+interface InstanceCardProps {
+  instance: any;
+}
+
+interface InstanceCardState {
+  showModal: boolean;
+}
+
+class InstanceCard extends Component<InstanceCardProps, InstanceCardState> {
+  state: InstanceCardState = {
+    showModal: false,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    const instance = this.props.instance;
+
     const domain = instance.domain;
     const description = instance.site_info.site_view.site.description;
     const sidebar = instance.site_info.site_view.site.sidebar || description;
     const icon =
-    instance.site_info.site_view.site.icon || "/static/assets/images/lemmy.svg";
+      instance.site_info.site_view.site.icon ||
+      "/static/assets/images/lemmy.svg";
     const banner = instance.site_info.site_view.site.banner;
     const users = instance.site_info.site_view.counts.users;
     const comments = instance.site_info.site_view.counts.comments;
@@ -120,6 +136,7 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
       <div className="card card-bordered bg-neutral-900 shadow-xl">
         <div className="card-body p-4">
           <div className="flex flex-row flex-wrap gap-4">
+            {this.state.showModal && (
               <DetailsModal
                 id={modalId}
                 domain={domain}
@@ -131,6 +148,7 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
                 sidebar={sidebar}
                 registrationMode={registrationMode}
               />
+            )}
             <InstanceIcon domain={domain} icon={icon} />
             <InstanceStats
               users={users}
@@ -154,9 +172,7 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
             </a>
             <button
               className="btn btn-secondary btn-outline text-white max-md:btn-block normal-case"
-            onClick={() =>
+              onClick={linkEvent(this, handleModalClick)}
-              (document.getElementById(modalId) as any).showModal()
-            }
             >
               {i18n.t("more_information")}
             </button>
@@ -164,7 +180,14 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
         </div>
       </div>
     );
-};
+  }
+}
+
+function handleModalClick(i: InstanceCard) {
+  const modalId = `modal_${i.props.instance.domain}`;
+  i.setState({ showModal: true });
+  (document.getElementById(modalId) as any).showModal();
+}
 
 const imgError =
   "this.onError=null;this.src='/static/assets/images/lemmy.svg';" as unknown as InfernoEventHandler<HTMLImageElement>;